Nível de especificidade
O nível de especificidade no CSS é um conceito essencial que determina quais estilos serão aplicados quando múltiplas regras entram em conflito. Cada seletor e a ordem de estilização possui um valor de especificidade associado. Quanto maior o valor de especificidade, maior a prioridade da regra.
Calculando a especificidade
A especificidade é representada por quatro componentes principais:
- Número de IDs (
#): Conta o número de IDs no seletor. - Número de Classes, Pseudo-classes e Atributos (
.,:,[attr]): Conta o número de classes, pseudo-classes e atributos no seletor. - Número de Elementos e Pseudo-elementos (
div,:before): Conta o número de elementos e pseudo-elementos no seletor. - Importância (
!important): Adiciona um valor fixo de 1.000 à especificidade, caso a regra tenha a declaração!important.
Ao calcular a especificidade, cria-se um número de quatro dígitos, com cada componente ocupando uma posição específica.
Exemplo
Considere o seguinte seletor:
nav ul#menu li a:hover- Número de IDs: 1
- Número de Classes, Pseudo-classes e Atributos: 0
- Número de Elementos e Pseudo-elementos: 4 (nav, ul, li, a)
- Importância: 0
Especificidade: 1-0-4-0
Regras de comparação
Ao comparar a especificidade de duas regras, comece comparando os componentes mais à esquerda e avance até encontrar a diferença. O valor mais alto em qualquer componente determina a regra mais específica.
-
Seletor A:
#cabecalho .titulo(Especificidade: 1-1-1-0) -
Seletor B:
.titulo(Especificidade: 0-1-1-0)
Neste exemplo, o Seletor A é mais específico porque o componente de ID tem um valor maior do que zero.
Dicas
- Evite
!important: O uso excessivo de!importantpode tornar o código difícil de manter. - Seja consistente: Mantenha uma convenção clara para o uso de IDs, classes e elementos.
- Use seletores descendentes com moderação: Evite seletor descendente profundo, pois isso aumenta a especificidade.
- Entenda a especificidade inline: Estilos inline têm uma alta especificidade e podem substituir outras regras.