Overview

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

Detecting elements and connecting them to UserGuiding components

You can find the HTML elements and their CSS selectors by a simple right-click on your platform page and inspect 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 an ID of your element

  • Copy the desired CSS selector (in this example, we select an ID) and paste it by adding # before it

In this example,

  • “g” is the HTML element we want to select

  • “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 (#).

Did this answer your question?