CSS Selector Tester
Test CSS selectors against pasted HTML and see every matching element with its markup and text. Uses querySelectorAll, so results match the browser exactly.
What is CSS Selector Tester?
The CSS selector tester runs a selector against HTML you paste and lists every matching element with its outer HTML and text content. It supports everything your browser supports, from attribute selectors to :not(), :is(), :has() and :nth-child().
How to use CSS Selector Tester
- Enter a CSS selector, e.g.
nav li:not(.active) > a[href^="/"]. - Paste or edit the HTML.
- Read the number of matches and the highlighted markup of each match.
- Copy all matched HTML with the Copy button.
Example
nav li:not(.active) > a[href^="/"] on the sample HTML
1 match: <a href="/blog" data-track="nav">Blog</a>
a[href] matches all 4 links in the sample.
When to use CSS Selector Tester
Use it to write selectors for CSS rules, test automation (Playwright, Cypress), web scraping or document.querySelector calls. It does not apply styles or compute specificity, and dynamic pseudo-classes like :hover never match in a static document.
How CSS Selector Tester works
The HTML is parsed into a detached document with DOMParser (scripts are not executed) and the selector is passed to querySelectorAll(). Matching is therefore exactly what your browser does, including its level of support for newer Selectors Level 4 features. Invalid selectors are caught and reported. Up to 200 matches are shown.
Common Use Cases
- Check that a Playwright locator matches exactly one button.
- Build a scraper selector for product prices.
- Learn how combinators (>, +, ~) and :not() behave.
- Test whether your browser supports :has().
FAQs
Why does my selector match nothing in a scraped page?
The page may build its HTML with JavaScript. Paste the rendered HTML from DevTools (Copy outerHTML), not the original source.
Is :has() supported?
Yes in current Chrome, Edge, Safari and Firefox. The tester uses your browser, so older browsers report it as invalid.
Does it show specificity?
No, it only shows which elements match.