Detecting Elements

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.

What is a CSS selector?

A CSS selector is the 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).

There are many different types of CSS selectors based on the element’s class, type, id, attribute, etc.

When should I use it?

The main reasons:

  • The element couldn't be properly 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.

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.

Related Article:

Why do I get the “Selected element is hidden” error?

Did this answer your question?