What CSS selectors are supported for feature tagging?


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 Suggested Match for feature tagging. In this case, you can choose Custom CSS when tagging a feature to target the desired element.


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" and "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 targeting a button that has the text "Next" in it. Note that your text in the selector must match the text in your HTML exactly.

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.