Pendo uses CSS selectors in tagging rules for creating Features. These rules identify specific elements within your application that you want to pull into a named Feature in Pendo when visitors interact with these elements. This article summarizes supported CSS selectors and how to deal with dynamic CSS selectors. For more information about tagging Features in Pendo, see Tagging and viewing Features.
Tagging Features using CSS selectors
When tagging a Feature, Pendo suggests a CSS selector for you under Suggested Match. If you want to choose an alternative CSS selector, you can instead use the Rule Builder for guided rule creation based on your application's code, or the Custom CSS option for full control over the creation of the CSS selectors in your rules.
For example, the following rule specifically targets a button with the text "Next" in it: button:contains('Next'). For more examples of the syntax used in CSS selectors, see W3Schools' CSS Selectors Reference.
To learn more about how Pendo uses CSS selectors for Feature tagging, see the following video in the Pendo Academy: Using HTML and CSS with Pendo. If you're on our US domain, visit the US Pendo Academy. If you're on our EU domain, visit the EU Pendo Academy.
Supported syntax
.class#idelementelement elementelement,elementelement > element-
[attribute]. We support"href"and"value". -
[attribute="value"]. See Syntax limitations, below. [attribute*="value"]-
:nth-child(index). Index is 1-based. -
:contains("text"). The text in the selector must match the text in your HTML exactly. See also Syntax limitations, below. ^=$=
Syntax limitations
The following limitation apply to syntax for Feature tagging.
- Siblings elements are unsupported.
- When using the
[attribute="value"]selector, only certain attributes are allowed. For more information, see HTML attributes in data collection. - Not all types of
elementare supported. You can't useselectoroption. For more information, see the following troubleshooting article: No Click Events for tagged dropdown menu item. - If you're using nested element, such as a class inside of another class, you can't use more than one
containsrule in a Feature tag. - If you're using multiple rules, you can only use
containswith the last rule for the Feature.
Dealing with dynamic CSS selectors
Typically, you should look for the most specific CSS selector for the UI element you’re trying to tag. If the HTML attribute you’re trying to use is dynamic, you must find a balance between specificity and flexibility to capture only the part of the CSS selector that remains consistent.
Many Websites rely on dynamically generated CSS selectors. Because CSS selectors affect how you tag Features and target guides, it’s important to ensure that the CSS selector you’re tagging is a stable identifier that’s unlikely to change over time.
A dynamic CSS selector is typically a Class name or element ID that’s likely to change due to activity in the application, such as a text heading that changes color when a user passes a mouse over it, or a new version of the application.
You can identify dynamic CSS selectors by looking for a seemingly random string of characters in the CSS selector. When you find dynamic CSS selectors, you can instead:
- Tag Features in Pendo using rules starts-with (^), ends-with ($), and contains (*) rule to ignore the dynamic parts of the CSS selector. This ensures Pendo is only matching to the part of the attribute that’s consistent. For more information, see Advanced Feature Tagging.
- Add static Classes and IDs to elements in your application to make your code more stable for Feature tagging and guide targeting.
- Use custom HTML elements to provide static selectors for use by Pendo.
Additional resources
For more guidance on CSS selectors, see the following videos on Pendo Academy if you're on our US domain:
- Using HTML and CSS with Pendo
- Identifying Dynamic CSS Selectors
- Tagging Features with Dynamic CSS Selectors
If you're on our EU domain, use the following links instead: