When you point 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 example, visit here.

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

Here it 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 Articles:

What is the Custom Selector and When to Use it?


Did this answer your question?