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

Learn how to use Custom CSS selectors.

Simay avatar
Written by Simay
Updated over a week ago


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.

Did this answer your question?