CSS selector demo
Experiment with CSS selectors in the browser: edit an HTML snippet, type a selector and instantly highlight every match with a hit count and the matched tag paths; invalid selectors are reported on the spot.
Runs in your browserEvery computation happens in your browser — your data never leaves this device.
Input
Selectors are parsed by the browser: comma lists, descendants, > + ~, attribute selectors, :nth-child() and :not()
Live highlight
Matched elements get a highlighted outline
UniKit
即开即用的在线工具箱
Matches
Matched elements： 0Valid selectors： 0
No element matched — try another selector
What this tool does
- Verify a selector before committing it: type it in and matching elements highlight instantly, no edit-and-refresh cycle.
- Find out what :nth-child(), attribute selectors or :not() actually match — the hit count and the element paths are both listed.
- Explain "which elements will this CSS affect" to a colleague by pasting the matched paths instead of describing them.
- Practise or teach CSS: change the HTML snippet and the selector and watch the match set change right away.
Example
Input
HTML snippet: <ul class="tags"><li class="tag">CSS</li><li class="tag">Vue</li><li class="tag">Astro</li></ul> Selector: .tag
Output
Matched elements: 3 li.tag:nth-child(1) li.tag:nth-child(2) li.tag:nth-child(3)
Matching uses the browser's native querySelectorAll and stays inside the snippet, so the rest of the page is untouched; paths carry :nth-child(n) to pin the element down.
Frequently asked questions
How does the matching work?
Your selector is handed straight to the browser's document.querySelectorAll, scoped to the preview container. That means results match real browser behaviour exactly — including a syntax error for selectors the browser does not support.
What happens with a comma-separated selector list?
It is split on commas, each selector is validated, and the parts are merged into a single query. The hit count is the number of distinct elements, so an element matched by two selectors is only counted once.
When is a selector reported as invalid?
A combinator at the start or end (such as > .card), unbalanced parentheses or brackets, an unterminated quote, or syntax the browser itself rejects. The first cases are caught by the tool before querying; the last one comes from the browser.
Does editing the HTML snippet affect the page itself?
No. The snippet is rendered with v-html inside its own preview container and matching is limited to that subtree. Highlighting is applied as temporary inline outline styles and cleared as soon as the selector changes.
I pasted HTML from my page but nothing matches. Why?
If the snippet is not well-formed — say a missing </div> — the browser repairs and restructures it while parsing, so the real DOM differs from what you typed. Check that the snippet is closed, then look at the matched paths.
Keywords：cssselectorcss 选择器queryselectorqueryselectorallnth-child属性选择器attribute selectornotweb 开发