CSS-Selector Clicks

When the element you care about has no handy ID, you can still target it by its place in the markup. GTM's matches CSS selector operator runs a real CSS query against Click Element, so one trigger can pinpoint a deeply-nested button.

Here two cards have identical "Choose plan" buttons; you'll fire a tag on the featured one only, using the selector .card.featured .btn.

You won't always be handed a selector like that one. Here's how to pull your own on any real page. The two cards live on this lesson's live page rather than here, so open that page (or any site) to follow along:

1. Right-click the element you want to track and choose Inspect. Your browser's DevTools open with that element highlighted in the HTML panel.
2. Read its tag, id, and classes, then build a selector from the most stable ones: #id targets an id, .class targets a class, and a space means "inside". So .card.featured .btn reads as "a .btn anywhere inside an element that has both card and featured".
3. In a hurry? Right-click the highlighted node → Copy → Copy selector and DevTools writes a unique selector for you. It works, but it's often brittle (long nth-child chains that break when the page changes), so trim it back to the classes that actually mean something.
4. Test it before you trust it. On a page that has the element, open the Console tab and run document.querySelectorAll('.card.featured .btn'), then confirm the match count is exactly what you expect, no more and no less. That's the same query GTM runs against Click Element.

Lean on stable hooks like a class or a data- attribute over the auto-generated copy, they survive redesigns far better than position-based chains. For the full menu of selector types, child, sibling, attribute, pseudo-class and more, the W3Schools CSS selectors reference is a solid place to keep reading.