Calculadora de especificidade CSS
1
ID
2
Classes/Attr
1
Elements
121
Total
0
ID
2
Classes/Attr
1
Elements
21
Total
Seletor vencedor
A
Specificità 1,2,1 vs 0,2,1
Perguntas frequentes
O que convém saber sobre a especificidade CSS
Como se calcula a especificidade CSS?
A especificidade é um trio (a,b,c): «a» conta IDs (#id), «b» conta classes (.classe), atributos ([attr]) e pseudoclasses (:hover), «c» conta elementos (div, p) e pseudoelementos (::before). Compara-se da esquerda: 1,0,0 ganha sempre a 0,10,0.
O que ganha a quê na especificidade CSS?
Os estilos em linha (style="") têm especificidade 1,0,0,0 e ganham a tudo. Depois vêm os IDs (0,1,0,0), depois classes, atributos e pseudoclasses (0,0,1,0), depois elementos e pseudoelementos (0,0,0,1). O seletor universal (*) tem especificidade 0. O !important passa por cima de tudo.
Porque é que a especificidade importa?
Quando várias regras CSS se aplicam ao mesmo elemento, ganha a de maior especificidade. Perceber isto evita surpresas no estilo e reduz o abuso do !important. Uma boa arquitetura de CSS mantém a especificidade baixa e previsível.
Como se calcula a especificidade de um seletor CSS?
A especificidade lê-se como um trio: o primeiro número conta IDs, o segundo classes, atributos e pseudoclasses, o terceiro elementos e pseudoelementos. Compara-se da esquerda, por isso 1,0,0 ganha a 0,10,0.
Que regra ganha quando dois seletores atingem o mesmo elemento?
A de maior especificidade. A ordem é estilo em linha, depois IDs, depois classes, atributos e pseudoclasses, depois elementos. O seletor universal vale zero e o !important passa por cima de tudo.
Porque é que compensa manter a especificidade baixa?
Uma especificidade baixa e previsível torna evidente que regra se vai aplicar e evita recorrer ao !important para remendar estilos. Comparar dois seletores antes de os escrever poupa surpresas depois.