O que é especificidade em CSS?

A especificidade em CSS é um mecanismo que determina qual regra de estilo será aplicada a um elemento se várias regras forem aplicáveis.

Cada seletor tem a sua própria pontuação de especificidade. Uma pontuação mais alta indica uma prioridade mais elevada.

O cálculo da especificidade baseia-se na quantidade dos seguintes componentes no seletor (por ordem decrescente de importância):

• Centenas (1000): Regras com !important (têm a prioridade mais alta, mas o seu uso não é recomendado).
• Centenas (100): Estilos inline (escritos diretamente no atributo style do elemento HTML).
• Centenas (100): Identificadores (seletor por id, por exemplo #meu-elemento).
• Dezenas (10): Classes (seletor por .classe), pseudoclasses (por exemplo :hover, :focus), atributos (por exemplo [type="text"]).
• Unidades (1): Tipos de elementos (nomes de tags HTML, por exemplo div, p), pseudoelementos (por exemplo ::before, ::after).
• Zero (0): Seletor universal (*), combinadores (>, +, ~), seletor pai (:not(), :is(), :where()) não adicionam especificidade por si só, mas podem influenciar a especificidade dentro de parênteses.

Exemplo de cálculo:

• p { ... } - Especificidade: 0-0-0-1
• .minha-classe { ... } - Especificidade: 0-0-1-0
• #meu-id { ... } - Especificidade: 0-1-0-0
• div.minha-classe { ... } - Especificidade: 0-0-1-1
• ul > li.item[data-id="1"] { ... } - Especificidade: 0-0-2-2 (li, ul = 2; .item, [data-id="1"] = 2)

Se duas regras tiverem a mesma especificidade, aplica-se a que estiver mais abaixo no arquivo CSS.

Exemplo:

/* Ficheiro style.css */
.minha-elemento {
  cor: azul; /* Especificidade: 0-0-1-0 */
}

#elemento-id {
  cor: vermelha; /* Especificidade: 0-1-0-0 */
}

.minha-elemento {
  peso-fonte: negrito; /* Especificidade: 0-0-1-0, substitui a regra anterior com a mesma especificidade */
}

Neste caso, o texto do elemento com id elemento-id será vermelho, e o texto do elemento com a classe minha-elemento será azul e em negrito (o azul é substituído pelo vermelho devido à maior especificidade de #elemento-id).

Compreender a especificidade é importante para escrever CSS previsível e fácil de manter. Evite especificidades excessivamente complexas e o uso de !important para uma melhor gestão dos estilos.