All Collections
Engagement
Customization
Using CSS selectors to highlight the right element
Using CSS selectors to highlight the right element

Learn how to be highly precise when selecting an HTML element in the Chrome Extension.

Simay avatar
Written by Simay
Updated this week

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 how to select your desired HTML element through the Custom CSS Selector option.

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 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 an 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 (#)

Did this answer your question?