Especificidade

O podcast do CSS - 003: Especificidade

Suponha que você esteja trabalhando com o seguinte HTML e CSS:

<button class="branding">Hello, Specificity!</button>

.branding {
  color: blue;
}

button {
  color: red;
}

Há duas regras que segmentam o mesmo elemento. Cada regra contém uma declaração que quer definir a cor do botão: uma tenta colorir o botão de vermelho e a outra tenta colorir de azul. Qual declaração é aplicada ao elemento?

Entender o algoritmo de especificidade do CSS é fundamental para entender como o CSS decide entre declarações concorrentes.

A especificidade é um dos estágios distintos da cascata, que foi abordada no último módulo, sobre a cascata.

Pontuação de especificidade

Cada regra de seletor em uma origem recebe uma pontuação. Você pode pensar na especificidade como uma pontuação total, e cada tipo de seletor ganha pontos para essa pontuação. As declarações de regras com a maior especificidade vencem.

Com a especificidade em um projeto real, o equilíbrio é garantir que as regras de CSS que você espera aplicar sejam aplicadas , mantendo as pontuações baixas para evitar complexidade. A especificidade só deve ser tão alta quanto precisamos, em vez de buscar a maior especificidade possível. No futuro, alguns CSSs genuinamente mais importantes podem precisar ser aplicados. Se você buscar a maior especificidade, vai dificultar esse trabalho.

A especificidade não é um número decimal, mas uma tríade que consiste em três componentes: A, B e C.

• A: especificidade semelhante a ID
• B: especificidade semelhante a classe
• C: especificidade semelhante a elemento

Geralmente, ela é representada usando a notação (A,B,C). Por exemplo: (1,0,2). A notação alternativa A-B-C também é usada com frequência.

Como comparar especificidades

As especificidades são comparadas comparando os três componentes em ordem: a especificidade com um valor A maior é mais específica; se os dois valores A estiverem empatados, a especificidade com um valor B maior será mais específica; se os dois valores B também estiverem empatados, a especificidade com um valor C maior será mais específica; se todos os valores estiverem empatados, as duas especificidades serão iguais.

Por exemplo, (1,0,0) é considerada uma especificidade maior que (0,4,3) porque o valor A em (1,0,0) (que é 1) é maior que o valor A de (0,4,3) (que é 0).

Os seletores influenciam a especificidade

Cada parte da tríade de especificidade começa com um valor de 0, então a especificidade padrão é (0,0,0). Cada parte de um seletor aumenta a especificidade que, dependendo do tipo de seletor, incrementa o valor de A, B ou C.

Seletor universal

Um seletor universal (*) não adiciona especificidade, deixando o valor na especificidade inicial de (0,0,0).

* {
  color: red;
}

Seletor de elemento ou pseudo-elemento

Um elemento (tipo) ou pseudo-elemento seletor adiciona especificidade semelhante a elemento que incrementa o componente C em 1.

Os exemplos a seguir têm uma especificidade geral de (0,0,1).

Seletor de tipo

div {
  color: red;
}

Seletor de pseudo-elemento

::selection {
  color: red;
}

Seletor de classe, pseudo-classe ou atributo

Um seletor de classe, pseudo-classe ou atributo adiciona especificidade semelhante a classe que incrementa o componente B em 1.

Os exemplos a seguir têm uma especificidade de (0,1,0).

Seletor de classe

.my-class {
  color: red;
}

Seletor de pseudo-classe

:hover {
  color: red;
}

Seletor de atributo

[href='#'] {
  color: red;
}

Seletor de ID

Um seletor de ID adiciona especificidade semelhante a ID, que incrementa o componente A em 1, desde que você use um seletor de ID (#myID) e não um seletor de atributo ([id="myID"]).

No exemplo a seguir, a especificidade é (1,0,0)

#myID {
  color: red;
}

Outros seletores

O CSS tem muitos seletores. Nem todos eles adicionam especificidade. Por exemplo, a :not() pseudo-classe não adiciona nada ao cálculo de especificidade.

A especificidade da pseudo-classe :not() é substituída pela especificidade do seletor mais específico no argumento de seletores separados por vírgulas, fornecendo a mesma especificidade como se tivesse sido escrita :not(:is(argument)).

div:not(.my-class) {
  color: red;
}

A :is() pseudo-classe também não adiciona ao cálculo de especificidade. Como :not(), ela usa a especificidade do argumento mais específico.

:is(h1, h2, h3) {
  color: blue;
}

Este exemplo tem uma especificidade de (0,0,1) porque tem apenas um tipo de seletor (type).

Com a adição de um id, a especificidade aumenta para (1,0,0).

:is(h1, h2, h3, #my-heading) {
  color: blue;
}

A :where() pseudo-classe é diferente. Não importa a especificidade de qualquer um dos argumentos, ela sempre tem uma especificidade de (0,0,0).

:where(h1, h2, h3, #my-heading) {
  color: blue;
}

Os estilos de baixa especificidade aplicados usando :where() permitem substituir esses estilos com seletores básicos mais tarde na sua folha de estilo:

:where(#my-content) {
   color: red;
}

p {
   color: blue;
}

Mesmo que :where() tenha um id na lista de argumentos, ele ainda tem apenas uma especificidade de (0, 0, 0), então o seletor p básico o substitui e o texto será blue.

Teste seu conhecimento

Teste seu conhecimento sobre a pontuação de especificidade

<div style="color: red"></div>

.my-class {
  color: red !important;
  color: white;
}

.branding {
  color: blue !important;
}

button {
  color: red !important;
}

<a class="my-class another-class" href="#">A link</a>

a {
  color: red;
}

a.my-class {
  color: green;
}

a.my-class.another-class {
  color: rebeccapurple;
}

a.my-class.another-class[href] {
  color: goldenrod;
}

a.my-class.another-class[href]:hover {
  color: lightgrey;
}

.my-button {
  background: blue;
}

button[onclick] {
  background: grey;
}

<button class="my-button" onclick="alert('hello')">Click me</button>

.my-button.my-button {
  background: blue;
}

button[onclick] {
  background: grey;
}

.my-button {
  background: blue;
}

[onclick] {
  background: grey;
}

[onclick] {
  background: grey;
}

.my-button {
  background: blue;
}