CSS Selector Tester
Test CSS selectors against a pasted HTML snippet and see exactly which elements match.
What is Selector Tester?
A selector playground that answers a single question: given this markup, what does this selector match? Each result shows the element, its path from the root and its classes.
How it works
The HTML is parsed into a tree by this page — no browser engine involved — and each selector is matched against every element by walking combinators right to left, exactly as a browser does. Structural pseudo-classes such as `:nth-child(2n+1)`, `:not()` and `:is()` are evaluated; dynamic states such as `:hover` cannot be answered without a live page and are listed separately.
- Paste the source. Drop in code, a stylesheet, a query or a selector list. Everything is read locally — the page never uploads what you paste.
- Choose the options. Indent width, quote style, keyword case or target browsers. The result updates as you change them, so you can see the effect immediately.
- Copy or download. Copy the result to the clipboard or download it as a file. Reset clears the form and returns every option to its default.
Examples
Checking a list selector
`.plans li:first-child` matches one element while `.plans li` matches three — the path column shows which of them each rule will style.
Verifying an attribute selector
`input[type="checkbox"]:checked` finds the pre-checked box in the snippet, confirming the selector before it goes into a stylesheet.
Common mistakes
Expecting a formatter to fix invalid code
Formatting is whitespace and quoting. A missing brace, an unclosed tag or an unquoted variable survives the round trip and is reported instead — check the findings list.
Minifying without running the tests afterwards
Even a safe, non-mangling minifier can expose an existing automatic-semicolon-insertion bug. The JavaScript Minifier keeps the newlines that matter, but re-run your tests before shipping.
Treating a rewritten query as verified
The SQL Dialect Converter translates the syntax it can prove; data types, casts and function differences are listed for review, not guessed. Run the converted query against a real database.
Renaming or reformatting generated files
Regenerating a formatter's output is a no-op only if the formatter is the same one that produced it. Keep generated code out of the round trip and format the source it came from.
Frequently asked questions
Why are :hover and :focus ignored?
They depend on the pointer, the keyboard and the browser's own state, none of which exist in a text document. The tool lists them as unsupported rather than pretending they failed to match.
Does it tell me which rule wins?
No — matching and the cascade are different questions. Run the matching selector through the CSS Specificity Calculator to see which rule would take precedence.
Can I paste a whole page?
You can, and for a real page a snippet of the relevant markup gives a far more readable result. Very large documents still work; the element count above the table tells you what was parsed.