Guides

🔍

Finding a CSS Selector

How to grab the CSS selector for any element on your page and use it with the Element Click trigger.

The Element Click trigger fires your experience the moment a visitor clicks a specific button, link, or element — like an “Add to Cart” button or a pricing tab. To use it, you need to tell the script which element to watch. You do that with a CSS selector.

What is a CSS selector?

A CSS selector is a short piece of text that points to an HTML element on the page. Think of it like a postal address for a button. The browser reads it and finds the exact element you mean.

By ID

#checkout-btn

The # sign means an ID. IDs are unique per page — the most reliable option.

By class

.add-to-cart

The . (dot) means a CSS class. Classes can appear on multiple elements.

By data attribute

[data-action="buy"]

Square brackets target custom HTML attributes — common on React/SPA sites.

💡Which type should I use?

If the element has an id attribute, use that — it's the safest. If not, a class name usually works. Avoid auto-generated selectors with deep chains of tags (like div > div > ul > li:nth-of-type(3) > button) — they break whenever the page layout changes.

Method 1 — Built-in element picker (easiest)

Every Experience Lab tool has a built-in picker directly in the CSS Selector field. It opens your site, injects a small script, and lets you click any element to capture its selector automatically — no DevTools knowledge needed.

Open the CSS Selector field

In the tool, set Trigger Type to Element Click. A CSS Selector input appears below it, along with a Pick from your site helper.

Enter your page URL and click "Open site"

Type or paste the URL of the page where the element lives, then click Open site. The page opens in a new tab and the console snippet is automatically copied to your clipboard.

Open the browser console on the new tab

On the page that just opened, press F12 (Windows) or ⌘ Opt J (Mac) to open DevTools, then click the Console tab.

Paste the snippet and press Enter

Click in the console input area, paste (Ctrl+V / ⌘V), and press Enter. You'll see an orange message: "Hover to highlight — click any element to get its CSS selector".

Hover to preview, then click your target element

Move your mouse over the page. Elements glow with an orange outline as you hover. When you find the element you want, click it. A dialog box appears showing the selector — it's also copied to your clipboard automatically.

Paste the selector back into Experience Lab

Switch back to the Experience Lab tab and paste the selector into the CSS Selector field. Done.

https://your-site.com/products

EL Picker active

ACME Store

ProductsAboutCart (2)

👟

Running Shoe Pro

$129.99 · Size 10

CSS Selector captured

#add-to-cart

✓ Copied to clipboard

Hover to highlight — click any element to capture its CSS selector

📝Can't paste in the console?

Some browsers block paste in the DevTools console as a security measure. If you see a warning, type allow pasting into the console and press Enter first — this unlocks paste for that session.

Method 2 — DevTools “Copy selector”

Chrome, Edge, and Firefox all have a right-click menu inside DevTools that copies a selector for any element. This is the traditional approach and works without any pasted snippet.

Right-click the element on the page and choose Inspect

On your website, right-click the exact button or link you want to target. In the context menu, click Inspect (Chrome/Edge) or Inspect Element (Firefox). DevTools opens with that element already highlighted in the HTML panel.

Right-click the highlighted element in DevTools

In the Elements (or Inspector) panel, right-click the blue-highlighted HTML line representing your element.

Choose Copy → Copy selector

In the menu that appears, hover over Copy, then click Copy selector. The selector is now in your clipboard.

Paste into Experience Lab

Switch to Experience Lab and paste the selector into the CSS Selector field.

Chrome DevTools

ElementsConsoleSourcesNetwork

▸ <body>

▸ <main class="product-page">

<buttonid="add-to-cart"class="btn-primary">

Add to Cart

</button>

Edit attribute

Add attribute

Duplicate element

Delete element

Copy▶

Copy element

Copy outerHTML

Copy selector✓

Copy JS path

Copy XPath

Selector copied: #add-to-cart

⚠️Auto-generated selectors can be fragile

Browser DevTools sometimes generates very specific selectors like #main > div.container > section:nth-child(2) > button. These break the moment anyone changes the page layout. Before using it, check if the element has a simpler id or class you can use instead.

Method 3 — Read the HTML and write it yourself

If you're comfortable with HTML, writing a selector yourself takes 30 seconds and produces something more robust than the auto-generated version.

Inspect the element

Right-click the element → Inspect. Look at the highlighted HTML line in DevTools.

Check for an id attribute

If the tag has id="add-to-cart", your selector is #add-to-cart. Stop here — this is the best option.

Check for a meaningful class name

If there's no ID but the tag has a class like class="btn-primary add-to-cart", try .add-to-cart. Avoid generic classes like .btn that appear on many elements.

Look for a data attribute

React and modern SPAs often use data-* attributes for testing. A tag with data-testid="add-to-cart-btn" gives you the very stable selector [data-testid="add-to-cart-btn"].

Test your selector before deploying

Always verify the selector finds the right element — and only that element — before generating your script.

Open the browser console on your target page (F12 → Console) and run:

Browser console

// Returns the element if found, or null if nothing matches
document.querySelector('#your-selector-here')

// Returns a count — should be exactly 1 for click triggers
document.querySelectorAll('#your-selector-here').length

Chrome DevTools — Console

›document.querySelector('#add-to-cart')

←<button id="add-to-cart">…</button>✓ 1 match

›document.querySelectorAll('.btn').length

←14⚠ too broad

›document.querySelector('.add-cart-btn')

←null✗ no match

✅ Good result

> button#checkout-btn

Returns the actual element — selector works.

❌ Bad results

nullNodeList(14) [...]

Null means nothing matched. Multiple means it's not specific enough.

💡Dynamic pages: the element may not exist on load

If your page loads content asynchronously (React, infinite scroll, AJAX), the element might not exist when the script first runs. Experience Lab's click trigger uses a MutationObserver to watch for the element to appear, so this is handled automatically — but if your selector returns null in the console right after the page loads, wait a second and run it again to confirm the element eventually appears.

Common examples

Use case	Selector example
Add to cart button	#add-to-cart
Checkout button	button[data-action="checkout"]
Pricing plan tab	.pricing-tabs .plan-pro
Contact form submit	#contact-form button[type="submit"]
Nav menu link	a[href="/pricing"]
Video play button	.hero-video .play-btn
Specific product card	[data-product-id="SKU-1234"]
Live chat open button	#intercom-launcher, #hubspot-messages-iframe-container

📝Comma-separated selectors

You can target multiple elements with one selector by separating them with a comma — like the live chat example above. The trigger fires when the visitor clicks any of them.

🎯 Need help targeting the right element?

Our team can help identify the right CSS selectors and set up Adobe Target experiences that fire at exactly the right moment.

Get in touch