Browser StudioBrowser Studio

Free tool

CSS selector tester

Paste HTML and a selector to see exactly what it matches, before you put it in a userscript or an extension.

How it works

From markup to a working selector in three steps.

  1. 01

    Paste the HTML

    Copy it from Chrome's Elements panel, once the page has finished loading.

  2. 02

    Type a selector

    The count and the highlighted preview update as you type.

  3. 03

    Tighten it

    Adjust until it matches exactly the elements you want, and nothing else.

FAQ

CSS selectors, explained.

Usually because the elements aren't in the page's HTML when your code runs. Many sites add content later with JavaScript, so wait for it (a MutationObserver works well). Content inside an iframe belongs to a separate document, and content inside a shadow root isn't reached by an ordinary selector from the page. Copy the HTML from the Elements panel once the page has finished loading and test against that.

No. The HTML is parsed in your browser and shown in a sandboxed frame with scripts turned off, so nothing you paste can run or reach this page. Nothing is uploaded.

Open DevTools, right-click the element in the Elements panel, then choose Copy and Copy selector. Chrome's selector is exact but often brittle, because it leans on position and generated class names, so shorten it and test it here.

Prefer stable attributes such as data-testid, aria-label, name or role, and readable class names. Many sites generate class names like css-1x2y3z that change with every release, and a selector built on them breaks the next time the site ships.

Rather not write it by hand?

ScriptPanda writes the userscript from a description. Open it on the page, say what you want, and it builds the tool into the page, then fixes it when the site changes.

Try ScriptPanda