CSS Selector criterion
Last updated
Was this helpful?
Last updated
Was this helpful?
The CSS Selector criterion is a triggering criterion that enables defining a .
To learn how to create a segment, please refer to this .
Use the CSS selector option if you want to trigger your campaign only when the loaded page contains an element linked to a specific ID or class. This option is fully identical to the CSS/ class/element you can configure in the Where section of the targeting step.
For example, you want to create a specific carousel on the homepage of your website for clients who have a gold membership. The only element that differentiates a gold member from a “standard” member is an icon located in the header of your website. Gold members have a specific menu/section listing all their advantages. On the website, this section is coded with an ID called #menu-gold.
In this case, you need to identify the sessions when this specific ID appears, this is your campaign trigger. To do so, choose CSS selector, select Include > ID, and select the relevant ID from the drop-down list. Let's see how to use it effectively according to your website.
Inspect your webpage : right click (or Ctrl+Shift+C) > Go to Elements tab
You can then inspect precisely elements of the page by pressing again the shortcut Ctrl+Shift+C or activating the inspect on hover option:
It will allow you to highlight elements on your page and select them when clicking on them:
You can then retrieve and copy easily a selector by right clicking on the element, select ‘copy’, then ‘copy selector’:
⚠️ Keep in mind though that there are a lot of ways to build selectors according to the degree of precision and what you want to target.
A copied selector may not be precise enough to distinguish an element from another.
To check it, you can press Ctrl+F to open a search bar and paste your selector to see the number of occurrences in the page:
If you created your own selector, it will also show you if it is correct or not.
ID : You can paste your ID with or without ‘#’. In the latter case, it will be automatically taken into account.
Class : You can paste your Class with or without a dot(.). In the latter case, it will be automatically taken into account.
According to your AB Tasty tag implementation and page load time, it can happen that the element you are targeting is appearing after the tag execution. In this case, you will be excluded from the targeting conditions even if the element is present on the page… If you notice this, you can select this option: a verification after tag’s execution will be added to prevent it.
The tag will verify every time some changes are applied on the HTML of the webpage until the targeting is validated or not (while being light and without loop to wait for the element to exist).
Need additional information?
Always happy to help!
If you want to build your own CSS selector, we recommend getting help from a front-end developer or reading some external documentation ( or ).
Custom selector : To write or paste your own custom selector according to all the syntax rules of CSS. Don’t forget to add # or a dot(.) before an or a when using this option.
Submit your request at