ronutz

Testador de seletores CSS

Cole HTML e um ou mais seletores (um por linha) e veja exatamente que elementos cada seletor casa: os elementos destacados na árvore analisada com o seu caminho e linha, a contagem por seletor e a sua especificidade contada pela seção 15 do Selectors Level 4. O HTML é analisado de modo inerte com o mesmo parser do explicador de estrutura HTML; os seletores são analisados e casados pelas próprias regras do Selectors Level 4 (composto por composto, da direita para a esquerda), incluindo :is(), :not(), :where(), :has(), :nth-child(An+B of S), operadores de atributo com as flags i e s, escapes CSS e as pseudoclasses de estado de formulário lidas dos atributos. Seletores inválidos são nomeados com a posição do erro; as pseudoclasses que um documento estático não responde são marcadas. Verificado contra o querySelectorAll do Chromium.

Documentação (Markdown)

Web e HTTP
Documentação
Experimente

20 elementos, 19 seletores. 19 válidos, nenhum inválido; 14 elementos casados por ao menos um seletor.

Os seletores

#seletorcasamentosA,B,Cnotas
li3 casamentos0,0,1
li.item3 casamentos0,1,1
.item.firstum casamento0,2,0
#topum casamento1,0,0
nav > ul > li:first-childum casamento0,1,3
li:last-child aum casamento0,1,2
li:nth-child(2)um casamento0,1,1
li:nth-child(odd)2 casamentos0,1,1
a[href]2 casamentos0,1,1
a:any-link2 casamentos0,1,1:any-link é lida dos atributos do modo como o HTML Standard a define (checked, selected, disabled incluindo os descendentes de um fieldset desabilitado fora do seu primeiro legend, required, readonly, open, href em a ou area, lang, dir, um hífen no nome de um elemento personalizado): a resposta de um navegador pode diferir onde scripts ou ações do usuário mudaram o estado.
a[target=_blank]um casamento0,1,1
a[href^="/d"]um casamento0,1,1
[data-x~=b]um casamento0,1,0
[title="hello world" i]um casamento0,1,0
[title="hello world"]nenhum casamento0,1,0
h1 + pum casamento0,0,2
h1 ~ p4 casamentos0,0,2
main *7 casamentos0,0,1
P.LEADnenhum casamento0,1,1

Um seletor que nomeia um pseudoelemento (::before, ::first-line, …) seleciona uma caixa, não um elemento; o querySelectorAll não devolve nada para ele, e a contagem mostrada é dos elementos que originariam o pseudoelemento. A especificidade é a tripla do membro mais específico da lista, contada pela seção 15 do Selectors 4 a partir do seletor analisado, de modo que um membro que um :is() ou :where() tolerante descartou conta zero (16.1); a calculadora de especificidade conta o texto como escrito. Clique num número para destacar na árvore os casamentos de um só seletor.

Os elementos casados

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

A árvore analisada

Cada elemento do documento que o parser construiu, com os números dos seletores que o casam. Um ponto na coluna marca um elemento que o parser criou (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

A mesma árvore, com os reparos e erros do parser, está no explicador de estrutura HTML e DOM, e a contagem de cada seletor na calculadora de especificidade CSS. O testador lê uma árvore estática: nenhuma folha de estilo é aplicada, nenhum script roda, nada está focado ou sob o ponteiro, nada foi visitado, e :scope é a raiz do documento. :empty segue o Chromium (Level 3) onde o Selectors Level 4 avançou; a flag s e a forma de :lang() entre aspas seguem o Level 4 onde o Chromium não avançou (verificado em 2026-10-05). Um seletor deixado aberto no fim é fechado ali, como faz o CSS Syntax. Classe e id casam com distinção de caixa em todo modo (o Quirks Mode Standard não define mais uma peculiaridade de caixa para eles). Entradas acima de 200.000 caracteres de HTML são recusadas.

Endpoint da APIGEThttps://ronutz.com/api/v1/css-selector-testerDocumentado, não servido. Abre a especificação.

Referências