Seletores e Especificidade CSS

---

O CSS trabalha com três tipos de seletores. Cada um com sua importância. Veja abaixo os seletores em ordem de importância.

1. Seletores com id. Ex: #menu{declaração}
2. Seletores com class. Ex: .texto{declaração}
3. 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:

view plaincopy to clipboardprint?

1. <div><p>Texto de exemplo</p></div> 

E com a regra CSS a seguir:

view plaincopy to clipboardprint?

1. 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:

view plaincopy to clipboardprint?

1. 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

---

Publicidade