O guia do iniciante para a especificidade CSS
Publicados: 2018-05-23Você já tentou substituir uma regra CSS, apenas para descobrir que ela não está funcionando como deveria? Ou percebeu que quando um elemento é direcionado várias vezes com diferentes combinações de seletores de CSS, apenas uma regra é aplicada por vez? Isso tudo por causa das regras de especificidade do CSS.
As regras de especificidade de CSS podem ser um dos conceitos mais confusos de entender, especialmente para iniciantes.
Se você está apenas começando com CSS, como regra de ordem padrão, você 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á-lo de forma eficiente.
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 deles é o mais relevante para aquele elemento.
Como funciona?
A especificidade de um seletor pode ser categorizada nos quatro níveis a seguir:
- Estilo embutido ou CSS
- IDs
- Classes, pseudoclasses e atributos
- Elementos ou pseudoelementos
Estilos inline ou CSS , onde o CSS é aplicado diretamente no documento HTML, fica 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 , pseudoclasses e atributos são os terceiros nesta ordem. Eles se parecem com: .post , :hover e [title] , respectivamente.
Elementos e pseudoelementos têm o menor valor. li e :after são exemplos básicos de um elemento e pseudoelemento.
O cálculo
O valor de especificidade pode ser calculado com a seguinte diretriz:
- Estilo inline ou CSS: 1,0,0,0
- Código: 0,1,0,0
- Classe ou pseudoclasse e atributo: 0,0,1,0
- Elementos e pseudoelementos: 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 .
&lt;div id="content"&gt; &lt;ul class="list"&gt; &lt;li&gt;Item 1&lt;li&gt; &lt;li&gt;Item 2&lt;/li&gt; &lt;li&gt;Item 3&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt;
Regra 1
Se você tiver dois ou mais seletores iguais para um elemento, todos eles terão o mesmo valor de especificidade, portanto, o menor ou o último será aplicado.
No trecho de CSS a seguir, ambos os seletores têm a mesma especificidade, de modo que a cor li será amarela, pois é colocada mais abaixo na linha.
ul li{
color: green;
}
ul li{
color: yellow;
}
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 maior que ul li , a cor permanecerá vermelha.
.list li{
color: red;
}
ul li{
color: green;
}
Regra 3
Vimos que a classe supera os elementos em nível de especificidade, agora vamos ver o que acontece com um ID.
No exemplo a seguir, temos uma classe e um ID que visam o mesmo elemento e afetam a cor da fonte. Novamente a mesma pergunta: qual regra deve ser aplicada?
#content li{
color: blue;
}
.list li{
color: red;
}
Como mencionado anteriormente, ID tem maior valor de especificidade do que classe, atributos e elementos, então 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ê for o autor do seu CSS e não estiver substituindo uma regra existente, dificilmente precisará 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 plugin é específico para o plugin 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.
#content li{
color: blue;
}
.list li{
color: red;
}
ul li{
color: green;
}
ul li{
color: yellow !important;
}
!important lhe dará o poder de impor seu CSS acima de qualquer nível de especificidade.
Como usar pontos de interrupção CSS para criar designs responsivos
O sucesso de um site depende muito da experiência do usuário. Atualmente, os usuários acessam um site de vários dispositivos diferentes, e fornecer uma experiência de usuário igual em cada dispositivo pode ser um desafio....
Você precisa ter cuidado ao usar !important porque você 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 pseudo-classes terão maior especificidade do que 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.
p:first-child{
color: green;
}
p::first-line{
color
:pink
;
}
Você pode pensar que a ordenação 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 inline. 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 .
.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;
}
Se .button estiver dentro de um container .red-block , a cor de fundo padrão do botã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 apenas. Por exemplo, este trecho de código tem como alvo o li , mas é muito específico.
div#content ul.list li{
color: purple;
}
Se você for muito específico com seu CSS, ele se tornará rígido e mais difícil de reutilizar. Você pode facilmente escrever .list li em vez de div#content ul.list li , o que tornará seu CSS mais limpo.
Recursos adicionais
- W3 org sobre especificidade
- Calculadora de especificidade CSS
- Erro do IE
- IE hack
Conclusão
Como você pode ver, a especificidade 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 bastante a torná-lo um bom desenvolvedor front-end.
Procurando outro tutorial de CSS? Experimente um destes!
- Como criar um layout simples com CSS Grid Layout
- Como usar técnicas de recorte e mascaramento CSS e SVG
- Como criar animações SVG com CSS
- Como criar designs 3D com a propriedade de transformação CSS3