A CSS selector is a pattern that targets specific HTML elements on a page. In the context of analytics, they’re how you tell Burst exactly which button, link or form to watch for clicks.
If you’ve ever wanted to track goal completions in WordPress without writing custom code, CSS selectors are the mechanism that makes it work. You point Burst at an element. Burst watches for clicks on it. You get data.
Key takeaways
- CSS selectors target HTML elements by their tag, class, ID or attributes
- In Burst, they’re used to define click-based goals without touching your theme code
- Class selectors (
.my-class) and ID selectors (#my-id) are the most useful for goal tracking - You can find the selector for any element by right-clicking it in your browser and inspecting it
The selector types you’ll actually use
Element selectors
Target elements by their HTML tag name. button targets all buttons. a targets all links.
Broad by default, so usually not precise enough for goal tracking on its own.
Class selectors
Target elements with a specific class attribute. A class selector starts with a dot: .add-to-cart targets every element with class="add-to-cart".
This is the most useful selector type for Burst goal tracking. Most WordPress themes and WooCommerce use consistent class names across buttons and forms, so one selector covers the whole site.
ID selectors
Target a single element by its ID attribute. An ID selector starts with a #: #checkout-button targets the one element with id="checkout-button".
IDs are unique per page, so this is more precise than a class selector. Useful when you want to track one specific element rather than every instance of a button style.
Attribute selectors
Target elements based on any attribute and its value. [href="/checkout/"] targets any link pointing to your checkout page. [type="submit"] targets all submit buttons.
Handy when the element you want doesn’t have a useful class or ID.
Descendant selectors
Target elements that live inside a specific parent. nav a targets links inside a nav element. .sidebar .cta-button targets CTA buttons only inside the sidebar.
Useful for narrowing a broad selector when the same class appears in multiple places on the page.
How to find a CSS selector for any element
You don’t need to know HTML to do this.
- Right-click the element you want to track (a button, a link, a form)
- Select “Inspect” or “Inspect element”
- Look at the highlighted HTML in the panel that opens
- Find the
classoridattribute on that element - Format it as
.classnameor#idname
For a WooCommerce add-to-cart button that looks like <button class="single_add_to_cart_button">, the selector is .single_add_to_cart_button.
Using CSS selectors in Burst
In Burst’s goal tracking, you enter a CSS selector to define what counts as a conversion trigger. When a visitor clicks an element matching that selector, Burst records a goal completion.
This works for:
- Add-to-cart buttons
- Checkout links
- Form submit buttons
- Download links
- Any clickable element on your WordPress site
No code changes to your theme required. Set up a click-based goal in Burst to see how it works in practice.
FAQs
Not really. If you can right-click an element and read the class or id from the inspector, you have everything you need. Most WordPress buttons have predictable, readable class names.
That’s often intentional. If you use .add-to-cart as your selector and your site has 20 product pages, Burst will track clicks on all of them. That’s usually what you want for conversion tracking.
Use an attribute selector or a descendant selector to target it. form[action=”/checkout/”] button[type=”submit”] is verbose but precise. Alternatively, ask your developer to add a tracking class to the element.
Yes. Open your browser console (F12) and type document.querySelectorAll(‘.your-selector’). If it returns the elements you expect, the selector works.
Related definitions: what is click tracking, what is goal tracking and what is a conversion.
