Digite um seletor por linha para comparar a especificidade; listas com vírgulas são divididas por seletor. Inválidos são marcados e camadas ou !important ainda decidem.
Funciona localmente no seu navegadorCada seletor recebe os três contadores da especificação: A para seletores de ID, B para classes, atributos e pseudoclasses, C para seletores de tipo e pseudoelementos. Os três exemplos já mostram o formato do resultado: #app .card:hover > h2 é 1-2-1, :where(.theme) .card:is(.featured, #hero) é 1-1-0 e main article[data-kind="docs"]::before é 0-1-3.
Os seletores são validados pelo próprio analisador do navegador e pontuados dentro da página, então nada é enviado. A linha acima do mapa informa quantos seletores foram lidos e qual é o mais forte; o bloco de cópia repete cada pontuação em texto simples.
A conta os seletores de ID como #app. B conta as classes (.card), os seletores de atributo ([data-kind="docs"]) e as pseudoclasses (:hover, :focus-visible, :nth-child(2n+1)). C conta os seletores de tipo (main, article, h2) e os pseudoelementos (::before, ::selection). O seletor universal * não soma nada em nenhuma coluna.
As pseudoclasses funcionais seguem a especificação: :where() contribui com zero, enquanto :is(), :not(), :has() e a lista of de :nth-child() são pontuados pelo argumento mais pesado; por isso :is(.featured, #hero) vale um ID. ::part() e ::slotted() contam como um pseudoelemento cada, e o argumento dentro deles não soma nada.
Uma lista separada por vírgulas em uma linha é tratada como o que é: vários seletores. a, b vira duas linhas de 0-0-1. Cada linha é validada antes pelo analisador do navegador; a que ele recusa — um combinador solto, dois-pontos triplos — continua listada, marcada como Seletor inválido, e fica fora do veredicto de mais forte, porque um seletor inválido nunca chega à cascata.
A pontuação responde a uma pergunta: se dois destes seletores casarem com o mesmo elemento, qual declaração vence pelo peso. Camadas, !important, estilos inline, ordem de aparição e proximidade de escopo ainda podem anular a aritmética; uma pontuação menor dentro de uma @layer anterior pode vencer.
Toda a comparação acontece na aba, então os seletores nunca são enviados a lugar nenhum. Não há limite fixo de linhas; o mapa, a linha de veredicto e o bloco de cópia são refeitos juntos enquanto você digita.
A ferramenta compara texto, não aplica sua folha de estilo: nada é casado contra um documento e os números são os pesos da especificação, não uma previsão do estilo computado. Para uma conferência visual, execute o seletor no inspetor do navegador na página real.