CSS Selector Tester
Test CSS selectors against your own HTML in the browser. Free, private, no upload.
Loading tool...
What is CSS Selector Tester?
The CSS Selector Tester is a developer tool that evaluates any CSS selector against HTML you paste in, entirely inside your browser. It lists every matched element with its tag, id, classes, and DOM path, and renders a highlighted preview so you can see exactly what the selector hits.
Key Benefits
- Instantly verify selectors before shipping styles or querySelector code.
- Debug zero-match selectors with structured feedback instead of guesswork.
- Keep proprietary HTML private since nothing is ever uploaded.
- Learn selector syntax faster with clickable curated examples.
Common Use Cases
- •Debugging a scraper or test suite selector that stopped matching after a markup change.
- •Verifying CSS rules against real component HTML before pushing styles.
- •Teaching or learning CSS specificity, combinators, and pseudo-classes interactively.
- •Quickly finding the DOM path of an element to reuse in devtools or automation.
How to Use the CSS Selector Tester
- Paste your HTML: Copy an HTML fragment from your project or use the built-in sample document, then paste it into the HTML input panel.
- Type a CSS selector: Enter the selector you want to test, for example ul.nav-list > li a, or click one of the example chips to load a common pattern.
- Run the test: Press Test Selector. Matched elements appear as structured result rows, and a sandboxed preview highlights them visually.
- Inspect and copy results: Review tag, id, classes, and DOM path for each match, then copy any path to the clipboard for devtools or automated tests.
Key Features
- Runs on the browser-native querySelectorAll engine, so matches mirror production behavior exactly.
- Highlighted sandboxed preview showing exactly which elements the selector hits.
- Structured match details: tag, id, class list, DOM path, and text snippet for every result.
- Friendly lint messages for unbalanced brackets and unclosed quotes before evaluation.
- One-click example selectors covering combinators, attributes, and pseudo-classes.
- Copy any match path straight to the clipboard for use in devtools or test code.
Frequently Asked Questions
Does my HTML get uploaded to a server?
No. The tool uses the browser-native DOMParser and querySelectorAll APIs, so all parsing and matching happens locally on your machine.
Which CSS selector levels are supported?
Everything your browser supports, since evaluation is delegated to the native engine: type, class, and id selectors, combinators, attribute selectors, and pseudo-classes including nth-child.
Why does my selector show zero matches?
Common causes include typos in class names, a combinator that does not match the actual DOM structure, or extra whitespace inside an attribute selector. Relax the selector step by step to isolate the issue.
Can I test pseudo-elements like before and after?
Pseudo-elements cannot be matched by querySelectorAll because they are not DOM nodes. The tester reports them as unsupported the same way browsers do in JavaScript.