Why CSS Selector Tester?
XPath and CSS selectors are the two locator languages of browser automation, and CSS selectors are easy to get wrong against real markup - a stale class, an extra level of nesting, a pseudo-class the browser rejects. This tester evaluates your selector against your actual HTML, outlines every match in a sandboxed preview, breaks the selector into its compounds and combinators, and shows its specificity - so the locator you commit to the test suite is the locator that works on the page.
- Test against the exact markup your automation will see - scraped or rendered HTML often differs from the pretty-printed version.
- Use the specificity readout to settle "which rule wins" debates before they reach a bug report.
- The preview is sandboxed without script permission, so paste even untrusted HTML without worrying about handlers running.
- Pair it with the XPath Tester when the page is XML or namespaced, and the Regex Tester when the target is free text.
What is CSS Selector Tester?
CSS Selector Tester evaluates CSS selectors against your own HTML right in the browser. Paste a document, write a selector, and matched elements are outlined live inside a sandboxed preview — so you can verify Playwright or Selenium locators, scraping queries, or stylesheet selectors against the actual page structure. The tool also breaks the selector into its compounds and combinators and computes its specificity per CSS Selectors Level 4 rules (including :is(), :not(), :has() argument rules and :where() zeroing). Structural problems like unbalanced brackets, empty classes, or malformed attribute selectors are flagged with precise messages before evaluation, and the sandbox means scripts in your HTML never run. Everything happens locally — your document and selector never leave the page.
Common Use Cases
Browser Automation Locators
Verify CSS locators for Playwright, Selenium, or Cypress against the real page markup before committing them to your test suite — including :nth-child() and attribute selectors.
Scraping & Data Extraction
Prototype CSS queries against scraped HTML to confirm the exact elements your pipeline will read, with selector lists supported out of the box.
Stylesheet Debugging
Check which elements a CSS rule actually targets, and see its specificity to understand why one rule overrides another.
jQuery-to-vanilla Migrations
Translate jQuery selectors like $(".card > a:first") into equivalent querySelectorAll calls and confirm they match the same elements.
How to Use This Tool
- Paste an HTML document (or load the sample to see the workflow)
- Write a CSS selector — comma-separated lists are supported — and press Enter or click Evaluate
- Review the compound/combinator breakdown and specificity, then see the matched elements outlined in the sandboxed preview
- Structural errors are reported before evaluation; if the browser itself rejects the selector, its exact message is shown
- Copy snippets for test reports, or toggle highlights to inspect matches in place
Related Tools
Learn More
- MDN — CSS Selectors The full selector reference with examples for every pseudo-class and combinator.
- W3C — Selectors Level 4 The specification this tool follows, including specificity rules for :is(), :not(), :has() and :where().
- MDN — Specificity How the (a, b, c) tuple decides which rule wins.