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.
Frequently Asked Questions (FAQ)
What does the CSS Selector Tester do?
It runs any CSS selector you type against an HTML snippet you provide, then shows how many elements match, lists each matched element with its tag, id, classes and text, and renders the HTML with the matches highlighted.
What happens with an invalid selector?
The tool shows a clear error message explaining that the selector is not valid CSS, so you can fix it before testing again.
What is the specificity breakdown?
It counts the parts of your selector: IDs, classes plus attribute selectors plus pseudo-classes, and elements plus pseudo-elements — the same three numbers browsers use to decide which rule wins.
Is the HTML snippet executed or sent anywhere?
No. The snippet is parsed in your browser with DOMParser, and any script tags in it are removed before the preview is shown — nothing leaves your device and no JavaScript in the snippet runs.
Can I use complex selectors?
Yes. Any selector your browser supports works, including combinators like spaces, >, + and ~, attribute selectors, and pseudo-classes such as :first-child or :nth-child.