CSS Selector Tester
NewTest a CSS selector against editable sample HTML and see every matching element highlighted, using the real browser selector engine.
Frequently Asked Questions
Does this use a custom CSS selector parser, or the real browser engine?
The real one — it runs `document.querySelectorAll()` with your exact selector string against the sample HTML, so the matching behavior (including pseudo-classes like :first-child, :nth-child(), and attribute selectors) is identical to what your actual browser would apply.
What happens if I enter an invalid selector?
The browser's own `SyntaxError` message is shown directly, since an invalid selector throws inside `querySelectorAll()` — this gives you the exact same error text you would see debugging in DevTools.
Can I edit the sample HTML?
Yes — the HTML textarea is fully editable, so you can paste in a real snippet from your own project to test selectors against your actual markup instead of the default sample.
How are matches highlighted?
Every matched element gets an outline and light background color applied directly in the rendered preview below, and the status line reports the total match count.
Does this support modern selectors like :has() or :is()?
Yes, to the extent your browser supports them — since matching is delegated to the native `querySelectorAll()`, any CSS selector syntax your browser understands (including newer relational and logical pseudo-classes) works here too.