O Guia do Iniciante para a Especificidade do CSS

Você já tentou substituir uma regra CSS, apenas para descobrir que ela não funcionava como deveria? Ou percebeu que quando um elemento é direcionado várias vezes com diferentes combinações de seletor CSS, apenas uma regra é aplicada por vez? Isso tudo por causa das regras de especificidade do CSS.

As regras de especificidade CSS podem ser um dos conceitos mais confusos para entender, especialmente para iniciantes.

Se você está apenas começando com CSS, como regra de ordem padrão, pode pensar que a regra CSS mais recente deve substituir a antiga. Parece simples, mas nem sempre funciona assim. Depende da especificidade do CSS, quando e qual regra CSS deve ser aplicada.

Então, vamos detalhar o que é a especificidade do CSS e como usá-la com eficiência.

O que é Especificidade em CSS?

Em palavras simples, se você tiver vários seletores CSS para um elemento, aquele com o valor específico mais alto será aplicado.

Seletores diferentes têm pesos diferentes e o navegador decidirá qual é o mais relevante para aquele elemento.

Como funciona?

A especificidade de um seletor pode ser categorizada nos quatro níveis seguintes:

1. Estilo embutido ou CSS
2. identidades
3. Classes, pseudoclasses e atributos
4. Elementos ou pseudoelementos

Estilos embutidos ou CSS , em que o CSS é aplicado diretamente no documento HTML, ficam assim <p> . Os estilos embutidos sempre terão o nível de especificidade mais alto.

Em segundo lugar nesta ordem estão os IDs , como #content . Portanto, qualquer seletor usando um ID terá o segundo nível de especificidade mais alto.

Classes , pseudo-classes e atributos são os terceiros nesta ordem. Eles se parecem com: .post , :hover e [title] , respectivamente.

Elementos e pseudo-elementos têm o menor valor. li e :after são exemplos básicos de um elemento e pseudo-elemento.

O cálculo

O valor da especificidade pode ser calculado com a seguinte diretriz:

• Estilo embutido ou CSS: 1,0,0,0
• ID: 0,1,0,0
• Classe ou pseudoclasse e atributo: 0,0,1,0
• Elementos e pseudo-elementos: 0,0,0,1
• Seletor universal (*): 0

Para verificar o nível de especificidade do seu seletor, você pode usar a calculadora de especificidade.

Regras básicas de especificidade CSS

Agora que você tem uma ideia de como a especificidade é organizada, vamos discutir algumas regras gerais e exemplos!

Este é o HTML base que usarei em meus exemplos. Aqui eu tenho uma pequena lista dentro de um container com #content .

 [css] <div id="content"> <ul class="list"> <li>Item 1<li> <li>Item 2</li> <li>Item 3</li> </ul> </div> [/css]

Regra 1

Se você tiver dois ou mais seletores iguais para um elemento, todos eles terão o mesmo valor de especificidade, portanto, o inferior ou o último será aplicado.

No trecho de CSS a seguir, ambos os seletores têm especificidade igual, então a cor li será amarela, já que está posicionada mais abaixo na linha.

 [css] ul li{ color: green; } ul li{ color: yellow; } [/css]

Regra 2

Se vários seletores forem usados ​​para um elemento, o seletor com o valor específico mais alto será aplicado.

No exemplo a seguir, li é direcionado por dois seletores diferentes e ambos afetam a cor da fonte. Então, qual regra deve ser aplicada?

Como na instância anterior, no conceito de ordem CSS, o segundo deve ser aplicado (para que a cor li seja verde), mas como .list li tem um valor de especificidade mais alto que ul li , a cor permanecerá vermelha.

 [css] .list li{ color: red; } ul li{ color: green; } [/css]

Regra 3

Vimos que a classe supera os elementos no nível de especificidade, agora vamos ver o que acontece com um ID.

No exemplo a seguir, temos uma classe e um ID direcionados ao mesmo elemento e afetando a cor da fonte. Novamente a mesma pergunta: qual regra deve ser aplicada?

 [css] .list li{ color: red; } ul li{ color: green; } [/css]

Como mencionado anteriormente, o ID tem um valor de especificidade maior do que classe, atributos e elementos, portanto, a cor será azul. Sempre segmente o ID para um nível de especificidade mais alto.

Regra 4

!important substituirá qualquer seletor de qualquer valor de especificidade. Mas tenha em mente que !important não deve ser usado em demasia, porque não é considerado uma prática recomendada de CSS.

Se você é o autor do seu CSS e não substitui uma regra existente, dificilmente precisaria usar !important .

Use !important apenas quando estiver tentando substituir o CSS de outra pessoa e sua especificidade não for capaz de superar o seletor anterior, especialmente quando você não puder controlar a ordem de colocação do seu CSS no HTML.

Isso acontecerá principalmente ao trabalhar no WordPress, onde você encontrará muitos arquivos CSS já adicionados por diferentes plugins e temas.

Geralmente, o CSS do plug-in é específico para o plug-in e usa IDs, inline-css ou mesmo !important para maior especificidade, para evitar qualquer conflito de CSS. Para substituir esse CSS, você precisa usar uma especificidade ainda maior; para esses cenários, você pode usar !important .

No exemplo a seguir, estou recriando os cenários anteriores, com li direcionado a diferentes seletores CSS, mas você pode ver que !important substitui todas as regras e a cor será amarela.

 [css] #content li{ color: blue; } .list li{ color: red; } ul li{ color: green; } ul li{ color: yellow !important; } [/css]

!important lhe dará o poder de impor seu CSS acima de qualquer nível de especificidade.

Você precisa ter cuidado ao usar !important porque não pode substituir esta regra. A única maneira de substituir um !important é usar outro !important posteriormente no CSS, para que seu CSS possa facilmente parecer confuso se você não entender o poder dele.

Algumas exceções

Elementos e pseudo-elementos têm a menor especificidade, mas existem algumas exceções interessantes (e um pouco confusas!). (Confuso porque eles não parecem seguir as regras que acabamos de ver.)

Neste exemplo, você verá :first-child (pseudo-class) e :first-line (pseudo-element). Acabamos de aprender que as pseudo-classes terão maior especificidade do que os pseudo-elementos, então, de acordo com isso, a cor da primeira linha do parágrafo deve ser verde, mas em vez disso será rosa.

 [css] p:first-child{ color: green; } p::first-line{ color :pink ; } [/css]

Você pode pensar que a ordem seria um problema aqui, mas mesmo mudar a ordem não mudará a saída. A calculadora de especificidade mostra uma imagem diferente do resultado.

É aqui que a especificidade fica um pouco confusa. Só posso supor que a razão para esse resultado é :first-line está mais próxima do elemento e provavelmente é tratada como estilo embutido. Você pode verificar jsfiddle para outro exemplo.

Como usar a especificidade de forma eficiente?

Se você entender as regras de especificidade do CSS, poderá usá-lo com muita eficiência e tornar seu CSS reutilizável.

Digamos que você queira usar o mesmo .button , mas com cores de fundo diferentes, então você configura um seletor específico: .red-block .button .

 [css] .button{ background: #97bc2d; font-size: 1em; display: inline-block; } .button a{ display: block; color: #fff; padding: 1em 2em; text-decoration: none; } .red-block .button{ background: red; } [/css]

Se .button estiver envolvido em um contêiner .red-block , a cor de fundo do botão padrão mudará para vermelho.

A especificidade do CSS é muito útil ao personalizar temas do WordPress, onde você está tentando substituir o CSS do autor do tema pelo seu próprio.

Erros comuns a evitar

Algumas pessoas usam seletores ultraespecíficos, o que não é uma boa prática. Seja tão específico quanto necessário. Por exemplo, este trecho de código tem como alvo o li , mas é muito específico.

 [css] div#content ul.list li{ color: purple; } [/css]

Se você for muito específico com seu CSS, ele ficará rígido e mais difícil de ser reutilizado. Você poderia facilmente escrever .list li ao invés de div#content ul.list li , o que deixaria seu CSS mais limpo.

Recursos adicionais

• W3 org em especificidade
• Calculadora de especificidade CSS
• Bug do IE
• Internet Explorer

Conclusão

Como você pode ver, a especificidade do CSS é uma ferramenta importante e todo desenvolvedor front-end deve tê-la em seu kit de ferramentas. Uma compreensão clara desse conceito pode ajudar muito a torná-lo um bom desenvolvedor front-end.