CSS Selector Tester
Type a selector and see exactly which elements it matches in a live-rendered HTML snippet -- matched nodes are outlined in the preview and listed below, with the selector specificity and full :has()/:is()/:not() support.
What this tool does
Runs a real selector against a real, sanitized, rendered copy
of your HTML using the browser's own
querySelectorAll() — every matching element is
outlined live in the preview, so there's no guessing whether a
selector is right; the browser's actual matching engine answers
directly.
Full modern selector support
Because it uses the browser's real selector engine, every
modern selector works exactly as it would in production —
combinators, attribute selectors, :nth-child(), and
the relational :has() pseudo-class alongside
:is() and :not() — not a subset a
hand-written parser happens to support.
Seeing what matched
Matched elements are visually outlined directly in the
rendered preview, a match count and specificity are shown above
it, and a list of each match's outerHTML snippet
appears below — three different views of the same result, useful
for confirming both "did it match" and "did it match the RIGHT
element."
Ready-made snippets and examples
Six HTML snippets — a nested list, a table, a form, a nav bar,
a card grid, and an article — give realistic markup to test
against without writing any HTML first, and 13 example selectors
demonstrate common patterns from simple class matching through
:has(> li.active).
Privacy and safety
Pasted HTML is sanitized before rendering — scripts, styles, and event-handler attributes are stripped — and everything runs entirely in your browser, nothing is sent to a server.