Especifidade do CSS

O que é especificidade?

Se houver duas ou mais regras CSS conflitantes apontando para o mesmo elemento, o navegador seguirá alguns princípios para determinar qual é a mais específica e, portanto, vence.

Considere a especificidade (specificity) como uma pontuação/nível que pode determinar quais declarações de estilo serão aplicadas ao elemento.

O seletor universal (* ) tem uma especificidade menor, enquanto o seletor ID tem uma especificidade maior!

Atenção:Esta especificidade é uma razão comum para que as regras CSS não se apliquem a alguns elementos, mesmo que você possa achar que deviam.

Hierarquia de especificidade

Cada seletor tem um lugar na hierarquia de especificidade. As seguintes quatro categorias definem o nível de especificidade dos seletores:

Estilos inline - Estilos inline (inline) são diretamente adicionados ao elemento que precisa ser estilizado. Exemplo: <h1 style="color: #ffffff;">.

ID - O ID é o identificador único do elemento da página, por exemplo, #navbar.

Classe, atributo e pseudo-classes - Esta categoria inclui .classes, [attributes] e pseudo-classes, por exemplo: :hover, :focus, etc.

Elementos e pseudo-elementos - Esta categoria inclui nomes de elementos e pseudo-elementos, como h1, div, :before e :after.

Como calcular a especificidade?

Lembre-se sempre da maneira de calcular a especificidade!

Começando com 0, adicione 1000 para o atributo style, 100 para cada ID, 10 para cada atributo, classe ou pseudo-classe e 1 para cada nome de elemento ou pseudo-elemento.

Pense nos três trechos de código a seguir:

Exemplo

A: h1
B: #content h1
C: <div id="content"><h1 style="color: #ffffff">Heading</h1></div>
  • A especificidade de A é 1 (um elemento)
  • A especificidade de B é 101 (um ID e um elemento)
  • A especificidade de C é 1000 (estilo inline)

Devido a 1 < 101 < 1000, a terceira regra (C) tem uma especificidade maior, portanto, será aplicada.

Regra de especificidade 1:

Em casos de especificidade igual: a regra mais recente é importante - Se a mesma regra for escrita duas vezes no arquivo de estilo externo, a regra subsequente será mais próxima do elemento que precisa ser estilizado, portanto, será aplicada:

Exemplo

h1 {background-color: yellow;}
h1 {background-color: red;}

Experimente pessoalmente

A regra subsequente sempre se aplica.

Regra de especificidade 2:

Os seletores de ID têm uma especificidade maior que os seletores de atributo - Veja os três linhas de código a seguir:

Exemplo

div#a {background-color: green;}
#a {background-color: yellow;}
div[id=a] {background-color: blue;}

Experimente pessoalmente

A primeira regra é mais específica que as outras duas, portanto, será aplicada.

Regra de especificidade 3:

Os seletores de contexto são mais específicos que os seletores de elementos únicos - As folhas de estilo inline são mais próximas dos elementos que precisam ser estilizados. Portanto, em seguintes situações:

Exemplo

CSS de arquivo externo:

#content h1 {background-color: red;}

No arquivo HTML:

<style>
#content h1 {
  background-color: yellow;
}
</style>

Aplicará a próxima regra.

Regra de especificidade 4:

O seletor de classe vencerá qualquer número de seletores de elementos - Seletor de classe (como .intro vencerá h1, p, div, etc.):

Exemplo

.intro {background-color: yellow;}
h1 {background-color: red;}

Experimente pessoalmente

Além disso,O seletor universal e os valores herdados têm 0 A especificidade de * do universal e dos valores herdados é 0. A especificidade dos valores herdados também é 0.