CSS Selector Tester
Paste an HTML snippet, type a CSS selector, and see exactly which elements it matches: a live match count, a detailed list of matched elements, a rendered preview with matches highlighted, and a specificity breakdown of your selector. Everything runs in your browser — nothing is uploaded.
Test a selector
Matches
0 element(s) matched
Specificity breakdown
Specificity is written as (a, b, c) — IDs, then classes, then elements. A higher number on the left always wins over numbers on the right.
Matched elements
| # | Tag | id | Classes | Text content |
|---|
Rendered preview (matches outlined in violet)
How to use
- Paste or type your HTML snippet into the first text box, or click "Load sample HTML" to try a ready-made example.
- Type any CSS selector into the selector box, for example
.on-sale,#page-titleorul.products > li:first-child. - Click "Test selector" to see the match count, the list of matched elements, the highlighted preview, and the specificity breakdown.
- Adjust your selector and test again — invalid selectors produce a clear error message instead of guessing.
- Click "Clear" to start over with empty inputs.
Good to know
How matching works
Your HTML is parsed with the browser built-in DOM parser and the selector runs through the standard querySelectorAll function — the exact same matching engine a web page uses. Any selector that is valid in a stylesheet is valid here, including descendant, child, sibling and attribute selectors.
Safe by design
Script tags inside your snippet are removed before the preview renders, and parsing never executes JavaScript. The snippet is also never sent to a server, so testing is safe even with private markup. Copying matched elements or the preview is not needed for the test, so no copy button is shown here — the results table holds all the detail.