Q: What is a CSS Selector?
A: CSS selectors are used to target specific HTML elements on a web page. In Mouseflow, you can use CSS selectors to:
Exclude or whitelist elements
Trigger custom tags when users interact with defined elements
Common CSS Selectors
Here are the most frequently used CSS selectors and how they work:
ID Selector:
#first-name→ targets elements withid="first-name"Class Selector:
.credit-card-form→ targets elements withclass="credit-card-form"Element Selector:
input→ targets all<input>elements
Combining selectors
You can also combine multiple selectors using combinators to narrow down your targeting:
space→ Descendant Selector (e.g.div span)>→ Child Selector (e.g.ul > li)+→ Adjacent Sibling (e.g.label + input)~→ General Sibling (e.g.h2 ~ p)
Finding an Element's CSS Selector
If you aren't sure of an element's CSS selector, here's how to find it from your browser:
Navigate to the live site page where the element is located.
Right-click on the element you want to target.
Click Inspect to open your browser's DevTools.
In the Elements panel, right-click the element.
Click Copy > Copy selector.
This will give you a full CSS path like #form > div > input.first-name which you can use in your Mouseflow website settings to target this particular element.
If you have questions or need assistance, reach out to our Support Team at support@mouseflow.com or through the in-app messenger.