O CSS trabalha com três tipos de seletores. Cada um com sua importância. Veja abaixo os seletores em ordem de importância.
- Seletores com id. Ex: #menu{declaração}
- Seletores com class. Ex: .texto{declaração}
- Seletores de elemento. Ex: p{declaração…}
A especificidade em CSS é utilizada para determinar quais as regras tem precedência, são mais específicas, para estilizar um seletor.
Por exemplo, se você tiver as seguintes marcação (X)HTML:
<div><p>Texto de exemplo</p></div>
E com a regra CSS a seguir:
p { color: red; } p { color: blue; }
Qual a cor final do elemento?
Acertou quem respondeu azul, isso porque foi a última regra a ser declarada.
Se tivéssemos a regra:
div p { color: red; } p { color: blue; }
Qual seria a cor final do elemento?
Acertou agora quem respondeu vermelho. Se perguntando o porquê? Simples, pela especificidade do seletor div p ser mais especifico que apenas o seletor p. Especificidade é isso!
Algumas formas de calcular a especificidade de seletores são as seguintes:
Você da a cada seletor id (#) um valor de 100. Cada class (.) você da um valor de 10, e por fim para cada seletor HTML um valor 1. Depois apenas some os valores. O maior total é a regra CSS mais especifica.
Veja alguns exemplos:
- p tem uma especificidade de 1 (1 seletor HTML)
- div p tem uma especificidade de 2 (2 seletores HTML; 1 +1)
- .tree tem uma especificidade de 10 (1 classe no seletor)
- div p.tree tem uma especificidade de 12 (2 seletores HTML e um seletor classe; 1 1 10)
- #baobab tem uma especificidade de 100 (1 seletor id)
- body #content .alternative p tem uma especificidade de 112 (seletor HTML, seletor id, classe seletor, seletor HTML; 1 100 10 1)
Conclusões:
Se todas as regras forem usadas a regra que iria “ganhar” seria a última por ser mais especifica, isso independente da ordem em que for escrita dentro do arquivo.
Abraço a todos!
Referência: htmldog