ronutz

CSS selector tester

Paste HTML and one or more selectors (one per line) and see exactly which elements each selector matches: the elements highlighted in the parsed tree with their path and line, the count per selector, and its specificity counted per section 15 of Selectors Level 4. The HTML is parsed inertly with the same parser as the HTML structure explainer; the selectors are parsed and matched by Selectors Level 4's own rules (compound by compound, right to left), including :is(), :not(), :where(), :has(), :nth-child(An+B of S), attribute operators with the i and s flags, CSS escapes and the form-state pseudo-classes read from attributes. Invalid selectors are named with the position of the error; the pseudo-classes a static document cannot answer are marked. Checked against Chromium's querySelectorAll.

Web & HTTP
Documentation
Try

20 elements, 19 selectors. 19 valid, none invalid; 14 elements matched by at least one selector.

The selectors

#selectormatchesA,B,Cnotes
li3 matches0,0,1
li.item3 matches0,1,1
.item.firstone match0,2,0
#topone match1,0,0
nav > ul > li:first-childone match0,1,3
li:last-child aone match0,1,2
li:nth-child(2)one match0,1,1
li:nth-child(odd)2 matches0,1,1
a[href]2 matches0,1,1
a:any-link2 matches0,1,1:any-link is read from attributes the way the HTML Standard defines it (checked, selected, disabled including a disabled fieldset's descendants outside its first legend, required, readonly, open, href on a or area, lang, dir, a hyphen in a custom element's name): a browser's answer can differ where scripts or user actions changed the state.
a[target=_blank]one match0,1,1
a[href^="/d"]one match0,1,1
[data-x~=b]one match0,1,0
[title="hello world" i]one match0,1,0
[title="hello world"]no match0,1,0
h1 + pone match0,0,2
h1 ~ p4 matches0,0,2
main *7 matches0,0,1
P.LEADno match0,1,1

A selector that names a pseudo-element (::before, ::first-line, …) selects a box, not an element; querySelectorAll returns nothing for it, and the count shown is of the elements that would originate the pseudo-element. The specificity is the triple of the most specific member of the list, counted per Selectors 4 section 15 from the parsed selector, so a member that a forgiving :is() or :where() dropped counts zero (16.1); the specificity calculator counts the text as written. Click a number to highlight one selector's matches in the tree.

The matched elements

  1. 1li3 matches
    • html > body > nav > ul > li:nth-child(1) line 7
    • html > body > nav > ul > li:nth-child(2) line 8
    • html > body > nav > ul > li:nth-child(3) line 9
  2. 2li.item3 matches
    • html > body > nav > ul > li:nth-child(1) line 7
    • html > body > nav > ul > li:nth-child(2) line 8
    • html > body > nav > ul > li:nth-child(3) line 9
  3. 3.item.firstone match
    • html > body > nav > ul > li:nth-child(1) line 7
  4. 4#topone match
    • html > body > nav line 5
  5. 5nav > ul > li:first-childone match
    • html > body > nav > ul > li:nth-child(1) line 7
  6. 6li:last-child aone match
    • html > body > nav > ul > li:nth-child(3) > a line 9 “No href”
  7. 7li:nth-child(2)one match
    • html > body > nav > ul > li:nth-child(2) line 8
  8. 8li:nth-child(odd)2 matches
    • html > body > nav > ul > li:nth-child(1) line 7
    • html > body > nav > ul > li:nth-child(3) line 9
  9. 9a[href]2 matches
    • html > body > nav > ul > li:nth-child(1) > a line 7 “Home”
    • html > body > nav > ul > li:nth-child(2) > a line 8 “Docs”
  10. 10a:any-link2 matches
    • html > body > nav > ul > li:nth-child(1) > a line 7 “Home”
    • html > body > nav > ul > li:nth-child(2) > a line 8 “Docs”
  11. 11a[target=_blank]one match
    • html > body > nav > ul > li:nth-child(2) > a line 8 “Docs”
  12. 12a[href^="/d"]one match
    • html > body > nav > ul > li:nth-child(2) > a line 8 “Docs”
  13. 13[data-x~=b]one match
    • html > body > main > div line 18
  14. 14[title="hello world" i]one match
    • html > body > main > div line 18
  15. 16h1 + pone match
    • html > body > main > p:nth-child(2) line 14 “Lead .”
  16. 17h1 ~ p4 matches
    • html > body > main > p:nth-child(2) line 14 “Lead .”
    • html > body > main > p:nth-child(3) line 15
    • html > body > main > p:nth-child(4) line 16
    • html > body > main > p:nth-child(5) line 17
  17. 18main *7 matches
    • html > body > main > h1 line 13 “Title”
    • html > body > main > p:nth-child(2) line 14 “Lead .”
    • html > body > main > p:nth-child(2) > em line 14 “text”
    • html > body > main > p:nth-child(3) line 15
    • html > body > main > p:nth-child(4) line 16
    • html > body > main > p:nth-child(5) line 17
    • html > body > main > div line 18

The parsed tree

Every element of the document the parser built, with the numbers of the selectors that match it. A dot in the gutter marks an element the parser created (html, head, body, tbody).

  1. 2<html lang="en">
  2. 3<head>
  3. 3<title>“Menu”
  4. 4<body>
  5. 5<nav id="top" class="menu main">4
  6. 6<ul>
  7. 7<li class="item first">12358
  8. 7<a href="/">“Home”910
  9. 8<li class="item">127
  10. 8<a href="/docs" target="_blank">“Docs”9101112
  11. 9<li class="item last">128
  12. 9<a>“No href”6
  13. 12<main>
  14. 13<h1>“Title”18
  15. 14<p class="lead">“Lead .”161718
  16. 14<em>“text”18
  17. 15<p>1718
  18. 16<p>1718
  19. 17<p>1718
  20. 18<div data-x="A b" title="Hello World">131418

The same tree, with the parser's repairs and errors, is in the HTML structure & DOM explainer, and each selector's counting in the CSS specificity calculator. The tester reads a static tree: no stylesheet is applied, no script runs, nothing is focused or hovered, nothing was visited, and :scope is the document root. :empty follows Chromium (Level 3) where Selectors Level 4 has moved on; the s flag and the quoted :lang() form follow Level 4 where Chromium has not (checked 2026-10-05). A selector left open at the end is closed there, as CSS Syntax does. Class and id match case-sensitively in every mode (the Quirks Mode Standard no longer defines a case quirk for them). Inputs over 200 000 characters of HTML are refused.

API endpointGEThttps://ronutz.com/api/v1/css-selector-testerDocumented, not served. Opens the specification.

Referanser