When you point to an element within a tooltip step, UserGuiding stores CSS selectors querying the element you've selected. Later on, when you preview this step, UG algorithm uses these stored selectors to figure out where the element is located. 

Custom CSS Selector is an option for you to overwrite selectors found by UserGuiding and find the element of your choice. When you activate and enter your preferred custom CSS selector, UserGuiding's selectors won't be used on that step anymore.


These selectors can also be combined to create more complex selectors.

If you want to see more CSS selector examples, visit here.

Let’s try to select the “Get Started for Free” button below with different custom CSS selectors.

Here is the “Get Started for Free” button that is also displayed within the console.

These four options below select the same element. 

1. div.landing-buttons a button.ug-button
div is an element
.landing-buttons is a class
a is an element
button is an element
.ug-button is a class
2. div.landing-buttons a button
3. a button.ug-button
4. button.ug-button

You can use different combinations of different selectors depending on your website structure.

Related Article:

What is a CSS selector, and when should I use it?


Did this answer your question?