Overview
If you want to make sure you're highlighting the correct UI element on your page, you may want to specify that unique element you're attaching to your Guide's step by utilizing the CSS selector.
Note: You can also check our video tutorial on how to select your desired HTML element through the Custom CSS Selector option.
What is a CSS selector?
A CSS selector is a pattern of elements that tell the browser which HTML elements should be selected. UserGuiding identifies the element you have selected using CSS Selectors, allowing you to control how the element is selected (highlighted area of the tooltip).
Many CSS selectors are based on the element's class, type, id, attribute, etc.
When should I use it?
The main reasons:
The element couldn't be appropriately detected on the page which happens in rare cases.
The unique element couldn't be found due to the presence of too many similar elements on the page
How to manually specify CSS selectors?
Inspect the page with right-click, to find the specific element you want to highlight
Find the CSS selectors within that element.
Enable the Custom CSS Selector in your UserGuiding Chrome extension.
Type the specific CSS Selector in the right format and save your changes
For example, to select an element with a specific class, write a period (.) character, followed by the class name. More examples can be found in the table below and here.
