Podcast do CSS - 003: especificidade
Suponha que você esteja trabalhando com o seguinte HTML e CSS:
<button class="branding">Hello, Specificity!</button>
button {
color: red;
}
.branding {
color: blue;
}
Há duas regras concorrentes aqui. Um deles vai deixar o botão vermelho, e o outro azul. Qual regra é aplicada ao elemento? Noções básicas sobre o algoritmo da especificação CSS sobre especificidade é a chave para entender como o CSS decide entre regras concorrentes.
A especificidade é um dos quatro estágios distintos da cascata, que foi abordado no último módulo, a cascata.
Pontuação de especificidade
Cada regra de seletor recebe uma pontuação. Pense na especificidade como uma pontuação total, e cada tipo de seletor gera pontos para essa pontuação. Vence o seletor com a maior pontuação.
Com especificidade em um projeto real, O equilíbrio é garantir que as regras de CSS que você espera aplicar, sejam aplicadas, ao mesmo tempo, mantendo as pontuações baixas para evitar complexidade. A pontuação deve ser tão alta quanto necessário, em vez de buscar a maior pontuação possível. No futuro, alguns CSSs realmente mais importantes talvez precisem ser aplicados. Se você alcançar a pontuação mais alta, isso deixará esse trabalho difícil.
Pontuação de cada tipo de seletor
Cada tipo de seletor gera pontos. Você soma todos esses pontos para calcular a especificidade geral de um seletor.
Seletor universal
Um seletor universal (*
).
não tem nenhuma especificidade e não recebe 0 pontos.
Isso significa que qualquer regra com 1 ou mais pontos vai substituir essa
* {
color: red;
}
Seletor de elemento ou pseudoelemento
Um elemento (tipo) ou pseudoelemento seletor recebe 1 ponto de especificidade .
Seletor de tipo
div {
color: red;
}
Seletor de pseudoelemento
::selection {
color: red;
}
Seletor de classe, pseudoclasse ou atributo
Uma classe, pseudoclasse ou o seletor de atributo recebe 10 pontos de especificidade.
Seletor de classe
.my-class {
color: red;
}
Seletor de pseudoclasse
:hover {
color: red;
}
Seletor de atributos
[href='#'] {
color: red;
}
O :not()
a própria pseudoclasse não acrescenta nada ao cálculo de especificidade.
No entanto, os seletores transmitidos como argumentos são adicionados ao cálculo de especificidade.
div:not(.my-class) {
color: red;
}
Esta amostra teria 11 pontos de especificidade
porque ele tem um seletor de tipo (div
) e uma classe dentro do :not()
.
Seletor de ID
Um ID
seletor recebe 100 pontos de especificidade,
desde que você use um seletor de ID (#myID
) e não um seletor de atributo ([id="myID"]
).
#myID {
color: red;
}
Atributo de estilo inline
CSS aplicado diretamente ao atributo style
do elemento HTML
recebe uma pontuação de especificidade de 1.000 pontos.
Isso significa que, para substituí-lo no CSS,
você precisa escrever um seletor extremamente específico.
<div style="color: red"></div>
Regra !important
Por fim, um !important
no final de um valor de CSS recebe uma pontuação de especificidade de 10.000 pontos.
Essa é a maior especificidade que um item individual pode ter.
Uma regra !important
for aplicada a uma propriedade CSS,
para que os elementos na regra geral (seletor e propriedades) não recebam a mesma pontuação de especificidade.
.my-class {
color: red !important; /* 10,000 points */
background: white; /* 10 points */
}
Teste seu conhecimento
Teste seus conhecimentos sobre pontuação de especificidade
Qual é a pontuação de especificidade de a[href="#"]
?
Especificidade no contexto
A especificidade de cada seletor que corresponde a um elemento é somada. Considere este exemplo de HTML:
<a class="my-class another-class" href="#">A link</a>
Este link tem duas classes. Adicione o seguinte CSS e ele terá um ponto de especificidade:
a {
color: red;
}
Mencione uma das classes da regra ele agora tem 11 pontos de especificidade:
a.my-class {
color: green;
}
Adicione a outra classe ao seletor, mas agora tem 21 pontos de especificidade:
a.my-class.another-class {
color: rebeccapurple;
}
Adicione o atributo href
ao seletor
ele agora tem 31 pontos de especificidade:
a.my-class.another-class[href] {
color: goldenrod;
}
Por fim, adicione uma pseudoclasse :hover
a tudo isso.
o seletor termina com 41 pontos de especificidade:
a.my-class.another-class[href]:hover {
color: lightgrey;
}
Teste seu conhecimento
Teste seus conhecimentos sobre pontuação de especificidade
Qual dos seguintes seletores vale 21 pontos?
article > section
article:hover a[href]
article.card.dark
Visualização da especificidade
Em diagramas e calculadoras de especificidade, a especificidade costuma ser assim:
O grupo à esquerda é de seletores id
.
O segundo grupo são seletores de classe, atributo e pseudoclasse.
O último grupo são os seletores de elemento e pseudoelemento.
Para referência, o seguinte seletor é 0-4-1
:
a.my-class.another-class[href]:hover {
color: lightgrey;
}
Teste seu conhecimento
Teste seus conhecimentos sobre visualização de especificidade
Qual dos seletores a seguir é 1-2-1
?
#specialty:hover li.dark
section#specialty.dark
li#specialty section.dark
[data-state-rad].dark#specialty:hover
A especificidade está aumentando de forma pragmática
Vamos supor que temos um CSS parecido com este:
.my-button {
background: blue;
}
button[onclick] {
background: grey;
}
Com um HTML que se parece com:
<button class="my-button" onclick="alert('hello')">Click me</button>
O botão tem um fundo cinza,
porque o segundo seletor ganha 11 pontos de especificidade (0-1-1
).
Isso ocorre porque ele tem um seletor de tipo (button
),
que é 1 ponto, e um seletor de atributo ([onclick]
), que é 10 pontos.
A regra anterior, .my-button
, recebe 10 pontos (0-1-0
),
porque ele tem um seletor de classe.
Se quiser turbinar essa regra, repita o seletor de classe desta forma:
.my-button.my-button {
background: blue;
}
button[onclick] {
background: grey;
}
Agora, o botão terá um fundo azul,
porque o novo seletor recebe uma pontuação de especificidade de 20 pontos (0-2-0
).
Uma pontuação de especificidade correspondente vê a instância mais recente vencer
Vamos ficar com o exemplo do botão por enquanto e mudar o CSS para esta:
.my-button {
background: blue;
}
[onclick] {
background: grey;
}
O botão tem um fundo cinza,
porque os dois seletores têm uma pontuação de especificidade idêntica (0-1-0
).
Se você alternar as regras pela ordem de origem, o botão seria azul.
[onclick] {
background: grey;
}
.my-button {
background: blue;
}
Essa é a única instância em que o CSS mais novo vence. Para isso, ele deve corresponder à especificidade de outro seletor que visa o mesmo elemento.