Calculadora de especificidade CSS

Calcule a especificidade de seletores CSS e veja qual prevalece.

Entrada

Dividir listas separadas por vírgulaOrdenar por mais forte primeiroFormato de saídaMostrar explicação da decomposição

Saída

Calculadora de especificidade CSS

Cole um ou mais seletores CSS, um por linha, e esta ferramenta calcula a especificidade de cada um como a pontuação padrão de três partes: IDs, classes (mais atributos e pseudo-classes) e elementos (mais pseudo-elementos). A especificidade determina qual regra em conflito o navegador aplica, portanto é útil quando duas regras de estilo direcionam o mesmo elemento e você precisa saber qual vence, ou quando está depurando por que uma sobreposição não funciona.

Ative Dividir listas separadas por vírgula para pontuar cada seletor numa lista como ".a, .b" numa linha separada em vez de combiná-los numa só. Ordenar por mais forte primeiro reordena os resultados da especificidade mais alta para a mais baixa. Escolha Tabela para um layout de coluna com IDs, classes e elementos discriminados, ou Notação 0-1-2 para uma pontuação compacta como "1-0-2" por seletor. Mostrar explicação da decomposição lista qual parte de cada seletor — um ID, uma classe, um elemento — contribuiu para a pontuação, a forma mais rápida de ver exatamente por que uma regra supera a outra.

A calculadora segue a especificação de Seletores CSS para os casos complicados: :where() sempre marca zero independentemente do que houver dentro, enquanto :is(), :not() e :has() assumem a especificidade do seu argumento mais específico. Um seletor contendo !important é sinalizado, pois sobrescreve a cascata normal independentemente da especificidade e vale a pena saber mesmo que não faça parte da pontuação do próprio seletor. As quebras de linha do Windows e Unix são tratadas da mesma forma, e as linhas em branco são ignoradas.

Tudo funciona localmente no seu navegador — os seletores que cola nunca são enviados para nenhuma parte, o que é importante se estiver a verificar uma base de código privada. Copie o resultado, transfira-o como ficheiro .txt, ou envie a saída de volta para a entrada para continuar a refinar os seus seletores.

FAQ

O que significa a notação 0-1-2?

Cada número é um nível de especificidade: o primeiro conta seletores de ID, o segundo conta classes, atributos e pseudo-classes, e o terceiro conta seletores de elemento e pseudo-elemento. Um seletor com um número primeiro mais elevado supera sempre um com apenas um número segundo ou terceiro mais elevado.

Como é que :not(), :is() e :has() são pontuadas?

Estas pseudo-classes assumem a especificidade do seletor mais específico dentro dos seus parênteses — :not(.a, #b) marca tão alto quanto #b — em vez de adicionarem peso próprio. :where() é a exceção: marca sempre zero, por muito complexa que seja a lista de seletores dentro.

O !important afeta a pontuação de especificidade?

Não. !important sobrescreve a cascata normal independentemente da especificidade, portanto não muda a pontuação de um seletor. A ferramenta marca seletores que o contêm com uma nota separada, pois é fácil de passar despercebido ao comparar regras.

O que acontece com uma lista separada por vírgula como ".a, .b"?

Com Dividir listas separadas por vírgula ativo, cada seletor na lista é pontuado na sua própria linha, correspondendo a como um navegador os avalia realmente. Desative a opção para pontuar toda a linha como um seletor combinado em vez disso.

O meu CSS é enviado para alguma parte?

Não. A especificidade é calculada inteiramente no seu navegador — os seletores que cola nunca saem do seu dispositivo.

Calculadora de especificidade CSS

Ferramentas relacionadas

Calculadora de especificidade CSS

FAQ