pular para o conteúdo [1]

Artigos sobre Front-End e Programação web

Entendendo a especificidade CSS

| 0 Comentários

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:

<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

Categorias: CSS | Tags: |

Deixe uma resposta

Campos obrigatórios *.



*

Topo