CSS selectors are used to "find" (or select) HTML elements. These can be placed in Mouseflow's Exclude & Whitelist settings to track or exclude specific elements from recordings. You can read more about this tool here.
The three most common CSS selectors are the id Selector, class Selector, and element Selector.
id Selector
The id selector will select all elements with a specific id attribute.
The following CSS selector will select all elements with an id "first-name"
#first-name
class Selector
This type of selector will select elements with a specific class attribute.
The following all elements with a class "credit-card-form"
.credit-card-form
element Selector
The element selector selects all elements with the specified element name attribute.
element {
css declarations;
}Combining Selectors
A CSS selector can contain more than one simple selector. Between the simple selectors, we can include a combinator.
There are four different combinators in CSS:
Descendant selector (space): matches all elements that are descendants of an element
Child selector (>): selects all elements that are the children of a specified element
Adjacent sibling selector (+): used to select an element that is directly after another specific element, these must have the same parent element
General sibling selector (~): selects all elements that are next siblings of an element
You can read more about every available CSS selector here.
Related Articles
Excluding and Whitelisting content via Website Settings
Excluding and Whitelisting content via the Visual Privacy Tool
Excluding Content via Code
Calling a manual submit event on button click using Google Tag Manager (GTM)
Create Virtual URLs with Google Tag Manager
