Skip to main content

Especificidade | CSS

  • Especificidade | CSS

O que é Especificidade?​

A especificidade é um conceito que define a prioridade entre regras de CSS que afetam o mesmo elemento. Em outras palavras, ela é uma forma de determinar qual regra de estilo será aplicada quando mais de uma for relevante.

A regra com maior especificidade "ganha" e prevalece sobre as outras. Se duas regras tiverem a mesma especificidade, a última definida no código (a mais próxima do elemento) será aplicada.

Como calcular a especificidade?​

A especificidade é calculada levando em consideração diferentes tipos de seletores usados em uma regra CSS, com valores atribuídos de acordo com o tipo de seletor. Aqui está a ordem de importância, do mais forte para o mais fraco:

  1. Seletores de ID (#id) – maior peso
  2. Seletores de classe (.classe), atributo ([atributo]) e pseudo-classes (:hover) – peso médio
  3. Seletores de tipo (div, p, a), pseudo-elementos (::before, ::after) – menor peso
  4. Seletores universais (*), combinadores (>, +, ~) e seletores de herança não adicionam peso na especificidade.

Como é feita a comparação?​

Cada tipo de seletor é representado por um valor numérico que é combinado para formar um triplo. A regra é a seguinte:

  • (ID, Class, Elemento) = a-b-c

    • a: número de seletores de ID.
    • b: número de seletores de classe, atributo e pseudo-classes.
    • c: número de seletores de tipo (elemento) e pseudo-elementos.

Exemplos de cálculo de especificidade​

1. Seletores de ID (#id)​

  • Exemplo: #menu { color: red; }
  • Especificidade: 0-1-0 (1 ID, 0 classes, 0 elementos).

2. Seletores de Classe (.classe), Atributos ([atributo]) e Pseudo-classes (:hover)​

  • Exemplo: .button:hover { color: blue; }
  • Especificidade: 0-1-1 (0 IDs, 1 classe, 1 elemento).

3. Seletores de Tipo (div, p, a) e Pseudo-elementos (::before, ::after)​

  • Exemplo: p { color: green; }
  • Especificidade: 0-0-1 (0 IDs, 0 classes, 1 elemento).

4. Regras com combinações de seletores​

  • Exemplo: div#main .menu { color: yellow; }
  • Especificidade: 1-1-1 (1 ID, 1 classe, 1 elemento).

5. Regras com o seletor universal (*)​

  • Exemplo: * { color: pink; }
  • Especificidade: 0-0-0 (nenhum ID, classe ou elemento).

Como as regras se aplicam?​

Vamos fazer alguns exemplos práticos com conflitos de regras para ver qual vai ser aplicada:

Exemplo 1:​

/* Regra 1 */
#menu {
  background-color: red;
}

/* Regra 2 */
.menu {
  background-color: blue;
}
  • Especificidade da Regra 1: 0-1-0 (1 ID)
  • Especificidade da Regra 2: 0-1-1 (1 classe)

A Regra 1 (ID) tem mais especificidade do que a Regra 2 (classe). Logo, a cor de fundo será vermelha se o elemento tiver o ID menu.

Exemplo 2:​

/* Regra 1 */
p {
  color: red;
}

/* Regra 2 */
p.special {
  color: green;
}
  • Especificidade da Regra 1: 0-0-1 (1 elemento)
  • Especificidade da Regra 2: 0-1-1 (1 classe, 1 elemento)

Neste caso, a Regra 2 será aplicada, pois ela tem maior especificidade (1 classe + 1 elemento) do que a Regra 1 (somente 1 elemento).

Exemplo com herança e cascata​

CSS também segue a cascata, ou seja, quando duas regras têm a mesma especificidade, a última definida será a vencedora.

/* Regra 1 */
p {
  color: red;
}

/* Regra 2 */
p {
  color: green;
}

Neste exemplo, ambas as regras têm a mesma especificidade (0-0-1), então a cor verde será aplicada porque a Regra 2 é mais próxima do elemento.

Resumo rápido das regras de especificidade:​

  1. ID > Classe > Tipo (Elemento).
  2. Quando duas regras têm a mesma especificidade, a última definida no código será aplicada.
  3. Importante: o seletor universal (*) não afeta a especificidade, mas pode ser útil para "resetar" ou aplicar estilos globais.