Overview

This article explains how you can adequately highlight specific parts of your web app by detecting and selecting the right element using CSS selectors.

Note: You can also check our video tutorial on using the Custom CSS Selector option to select your desired HTML element.

Detecting elements and connecting them to UserGuiding components

You can find the HTML elements and their CSS selectors by right-clicking on your platform page and inspecting the desired element in your browser’s console.

Then you can enter the CSS selectors by enabling the CSS Selector option in the Chrome extension settings of your guide component (tooltip or input) or your hotspot.

Example

• Right-click & inspect your element
• Select a class name or the ID of your element
• Copy the desired CSS selector (in this example, we select an ID) and paste it by adding # before it
• “book-book” is the ID we’ll use as a CSS selector.

.

Important notes

• We advise using the IDs as they are more specific than classes found in multiple HTML elements.
• If you want to use the class name of an element, you need to put a dot (.) before the CSS selector’s name; if you want to use an ID, you need to put a hashtag (#)
• For more details and examples on CSS Selectors, you can check this page.