Free Tool
CSS Selector Tester
Paste HTML and test CSS selectors instantly. See which elements match, their tag names, and text content. Perfect for building GTM Click and Visibility triggers.
Paste the HTML markup you want to test selectors against.
CSS Selector Tips for GTM
Use stable selectors
Prefer [data-action="add-to-cart"] or #checkout-btn over generated classes like .css-1a2b3c that change on each build.
Avoid overly specific selectors
Deep selectors like div > div > div > span.price break when the page structure changes. Use .product-card .price instead.
GTM Click triggers match the clicked element and its parents
If a user clicks an <svg> icon inside a <button>, GTM evaluates the selector against both elements. Use matches CSS selector condition in GTM to handle this.
Test with :nth-child and :not()
GTM supports most CSS pseudo-selectors. Use .nav a:not(.logo) to exclude elements, or li:nth-child(2) to target specific items.
Element Visibility triggers need a single match
GTM Visibility triggers work best when the selector matches exactly one element. If multiple elements match, GTM only tracks the first one by default.
Attribute selectors for dynamic content
Use [href*="checkout"] to match links containing "checkout", or [data-product-id] to match elements with a specific data attribute.
Skip the guesswork
GTM Event Helper generates stable CSS selectors automatically when you click any element on your site. One click to create GTM triggers.
Install GTM Event Helper — Free