CSS selectors are used to select HTML elements on a webpage. They help Whatfix correctly identify which element your content must latch on to. The following are instances where you would want to use CSS selectors in your content's display rules:
When your Whatfix content, such as Flow tooltips, Beacons, Smart Tips, and more, is showing in the wrong place.
When your content is not displaying because it could not locate the correct element.
When you want your content to show faster.
The following scenarios may need you to identify an element's CSS selector:
The following are some common CSS selectors:
CSS Selector | Description | Example | Corresponding HTML |
|---|---|---|---|
| Selects the elements with the specified class |
|
|
| Selects the elements with the specified id |
|
|
| Selects the elements having the specified attribute equal to the specified value |
|
|
For a more detailed reference on CSS selectors, see CSS Selector Reference.
Use the following steps to find out an element's CSS selectors in your browser:
Open your browser's Developer Tools.
Go into Inspector Mode.
Select the element whose selectors you want to find.
Identify the selectors of the highlighted tag in the Elements section of the Developer Tools window.
Use an appropriate selector in your content's Display Rules.
your title goes here
Use CSS selectors in Display Rules such as Selected Element Is and Other Element On Page.
How to choose a good CSS selector?
Once you identify the CSS selectors of an element, you must choose a selector or a combination of selectors such that it uniquely describes your selected element. The following are some tips to do so:
If your element has an ID, use it as a CSS selector. The ID of an element is usually unique.
If your element has multiple classes, use a combination of them in your Display Rules.
Note:
Specify multiple classes in a CSS selector by chaining them together. The following is an example of specifying 3 classes in a CSS selector:
.class1.class2.class3
If your element doesn't have any unique attributes, check whether a parent element can uniquely identify your element. Ensure that the parent element contains only the element you want to show your content on, else your content may show on any one of the sibling elements.
