Who can use this feature?
- Available with Enterprise, Advanced, Business, and Free plans.
- Available for admins, architects, explorers, and standard users.
CSS selectors let you search for specific elements in Fullstory based on their HTML attributes, classes, IDs, or element types. This is useful when you need more precision than searching by display text alone.
For more information about searching in Fullstory, see What user and event filters are available with OmniSearch.
Supported CSS Selector Syntax
The following CSS selector formats are supported in Fullstory Search:
| Syntax | Example | Description |
|---|---|---|
a b |
div span |
Any descendant |
[attr=value] |
[data-test="button"] |
Attribute equals |
[attr~=value] |
[data-test~="active"] |
Attribute contains word (space delimited) |
[attr*=value] |
[data-component*="line"] |
Attribute contains |
[attr|=value] |
[data-region|="nav"] |
Attribute starts with word (hyphen delimited) |
[attr^=value] |
[data-id^="user"] |
Attribute starts with |
[attr$=value] |
[data-component$="Title"] |
Attribute ends with |
#id |
#gatsby-focus-wrapper |
ID selector (exact match) |
[id=value] |
[id="wrapper"] |
ID equals |
[id|=value] |
[id|="section"] |
ID starts with word (hyphen delimited) |
[id^=value] |
[id^="gats"] |
ID starts with |
.class |
.xToClose |
Class selector (exact match for single class) |
[class=value] |
[class="btn-primary"] |
Class equals |
[class|=value] |
[class|="btn"] |
Class starts with word (hyphen delimited) |
[class^=value] |
[class^="mobile"] |
Class starts with |
element |
a |
Type selector |
Note: ID and class selectors support only a limited set of operators. The operators ~=, *=, and $= are not supported for id and class attributes. The supported operators for ID and class are: = (equals), |= (starts with word, hyphen delimited), and ^= (starts with). All operators are supported for other attributes (e.g., data-* attributes).
Working with Common Selectors
Attribute Selectors
Attribute selectors are the most reliable way to target elements because they match explicit values in your HTML. They're especially useful for data- attributes that developers add specifically for testing or tracking purposes.
Example: To find clicks on elements with a data-component attribute ending in "Title", use: [data-component$="Title"]
Attribute selectors work well with Watched Elements since you can configure elements to watch using stable CSS selectors like data attributes.
ID Selectors
ID selectors are useful when an element has a unique identifier. Fullstory supports the following ID selector formats:
-
#id— Exact match (e.g.,#gatsby-focus-wrapper) -
[id="value"]— ID equals (e.g.,[id="wrapper"]matchesid="wrapper") -
[id|="value"]— ID starts with word, hyphen delimited (e.g.,[id|="section"]matchessection-1) -
[id^="value"]— ID starts with (e.g.,[id^="gats"]matchesgatsby-focus-wrapper)
Not supported for ID: The operators ~= (contains word), *= (contains), and $= (ends with) do not work with the id attribute. Use the supported formats above instead.
Tip: Use Inspect Mode or Data Studio to find reliable ID values in your application.
Class Selectors
Class selectors can match elements by their CSS class. Fullstory supports the following class selector formats:
-
.class— Exact match for a single class (e.g.,.btn-primary) -
[class="value"]— Class equals (e.g.,[class="btn-primary"]matchesclass="btn-primary") -
[class|="value"]— Class starts with word, hyphen delimited (e.g.,[class|="btn"]matchesbtn-primary) -
[class^="value"]— Class starts with (e.g.,[class^="mobile"]matchesmobile-landing-page)
Not supported for class: The operators ~= (contains word), *= (contains), and $= (ends with) do not work with the class attribute. Use the supported formats above instead.
Important: Multi-class limitation
When an element has multiple classes, the entire class attribute is treated as one string for matching purposes. For example, if an element has:
<div class="Eo-B_gf Eo-E0_gf checkoutContent-reviewTitle-GYT Eo-L_gf">
This selector will work:
-
.checkoutContent-reviewTitle-GYT— Matches the specific class name exactly.
These selectors will NOT work:
-
[class^="checkoutContent"]— Won't match because the string starts with"Eo-B_gf", not"checkoutContent". -
[class*="checkoutContent"]— The*=operator is not supported for class attributes.
Recommendation: When working with elements that have multiple classes, use the .className syntax to match a specific class you know appears on the element. If you need more flexible matching, consider using data- attributes instead, which support all operators including *= (contains).
Examples:
- For an element like
<button class="ui-button btn-primary btn-enabled">, you can use.btn-primaryto match it, even though it has multiple classes. - For a close button with
class="modal-close xToClose", use.xToClose. - For an element with
class="mobile-landing-page", you can use[class^="mobile"]to match by the beginning of the class string.
Type (Element) Selectors
Type selectors match elements by their HTML tag name. For example, a matches all hyperlinks, button matches all buttons, and input matches all input fields.
Example: To find all clicks on hyperlinks, use: a
Type selectors are broad and will match many elements. Consider combining them with other filters to narrow your search.
Frequently Asked Questions
Does Fullstory support nth-child selectors?
No, not at this time. Try using Page Insights > Inspect Mode or Data Studio to identify selector types you can use in the CSS selector, such as an id, class or attribute.
Does Fullstory support direct descendent expressions?
Fullstory does not support direct descendent expressions such as > for Search.