How Can We Help?

What CSS selectors are supported for feature tagging?

Overview

Pendo uses CSS Selectors as feature rules to identify specific elements within your application. There may be situations where you want to choose an alternative CSS Selector to Pendo’s Suggest Match for feature tagging. In this case, you can choose Custom CSS when tagging a feature to target the desired element.

elementMatching.png

Click here for a basic reference on CSS Selectors. This provides examples of the various syntax used.

Supported Syntax

  • .class
  • #id
  • element
  • element element
  • element,element
  • element > element
  • [attribute] - We support "href", "value"
  • [attribute="value"]
  • [attribute*="value"]
  • :nth-child(index) - Note: index is 1-based.
  • :contains("text")
  • ^=
  • $=

Siblings are not supported.

 

Note: When using the [attribute='value'] selector, only certain attributes are allowed. Click here for a full list of the HTML attributes Pendo collects.

 

Example of :contains()

Here is an example for a button that has the text "Next >>" in it:

containsExample.png
Note: If you are using nested element (e.g. a class inside of another class) you cannot use more than one contains rule in a feature tag and the contains rule must be on the last feature in the tag. 

Related articles