Se houver duas ou mais regras CSS que apontam para o mesmo elemento, o seletor com o maior valor de especificidade "ganhará", e seu a declaração de estilo será aplicada a esse elemento HTML.
Pense na especificidade como uma pontuação/classificação que determina qual declaração de estilo é finalmente aplicado a um elemento.
Veja os seguintes exemplos:
Neste exemplo, usamos o elemento “p” como seletor e especificamos uma cor vermelha para este elemento. O texto ficará vermelho:
<html>
<head>
<style>
p {color: red;}
</style>
</head>
<body>
<p>Hello World!</p>
</body>
</html>Experimente você mesmo →
<!DOCTYPE html>
<html>
<head>
<style>
p {color: red;}
</style>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
Agora veja o exemplo 2:
Neste exemplo, adicionamos um seletor de classe (chamado "teste") e especificou um verde cor para esta aula. O texto agora ficará verde (mesmo que tenhamos especificado um vermelho cor para o seletor de elemento "p"). Isso ocorre porque o seletor de classe é fornecido maior prioridade:
<html>
<head>
<style>
.test {color: green;}
p {color: red;}
</style>
</head>
<body>
<p class="test">Hello World!</p>
</body>
</html>Experimente você mesmo →
<!DOCTYPE html>
<html>
<head>
<style>
.test {color: green;}
p {color: red;}
</style>
</head>
<body>
<p class="test">Hello World!</p>
</body>
</html>
Agora veja o exemplo 3:
Neste exemplo, adicionamos o seletor de id (denominado "demo"). O texto agora será azul, porque o seletor de ID tem prioridade mais alta:
<html>
<head>
<style>
#demo {color: blue;}
.test {color: green;}
p {color: red;}
</style>
</head>
<body>
<p id="demo" class="test">Hello
World!</p>
</body>
</html>Experimente você mesmo →
<!DOCTYPE html>
<html>
<head>
<style>
#demo {color: blue;}
.test {color: green;}
p {color: red;}
</style>
</head>
<body>
<p id="demo" class="test">Hello World!</p>
</body>
</html>
Agora veja o exemplo 4:
Neste exemplo, adicionamos um estilo embutido para o elemento “p”. O o texto agora será rosa, porque o estilo embutido tem a prioridade mais alta:
<html>
<head>
<style>
#demo {color: blue;}
.test {color: green;}
p {color: red;}
</style>
</head>
<body>
<p id="demo" class="test"
style="color: pink;">Hello World!</p>
</body>
</html>Experimente você mesmo →
<!DOCTYPE html>
<html>
<head>
<style>
#demo {color: blue;}
.test {color: green;}
p {color: red;}
</style>
</head>
<body>
<p id="demo" class="test" style="color: pink;">Hello World!</p>
</body>
</html>
Cada seletor CSS tem seu lugar na hierarquia de especificidade.
Existem quatro categorias que definem o nível de especificidade de um seletor:
1. Estilos embutidos - Exemplo:
<h1 style="color: pink;">
2. IDs - Exemplo:
#navbar
3. Classes, pseudoclasses, seletores de atributos - Exemplo:
.test, :hover, [href]
4. Elementos e pseudoelementos - Exemplo:
h1, ::before
Memorize como calcular a especificidade!
Comece em 0, adicione 100 para cada valor de ID, adicione 10 para cada valor da classe (ou pseudoclasse ou seletor de atributos), adicione 1 para cada seletor de elemento ou pseudoelemento.
Observação: o estilo embutido recebe um valor de especificidade de 1000 e é sempre dada a mais alta prioridade!
Nota 2: existe um exceção a esta regra: se você usar o !important regra, ele substituirá até estilos embutidos!
A tabela abaixo mostra alguns exemplos de como calcular valores de especificidade:
| Selector | Specificity Value | Calculation |
|---|---|---|
| p | 1 | 1 |
| p.test | 11 | 1 + 10 |
| p#demo | 101 | 1 + 100 |
| <p style="color: pink;"> | 1000 | 1000 |
| #demo | 100 | 100 |
| .test | 10 | 10 |
| p.test1.test2 | 21 | 1 + 10 + 10 |
| #navbar p#demo | 201 | 100 + 1 + 100 |
| * | 0 | 0 (the universal selector is ignored) |
O seletor com o maior valor de especificidade vencerá e terá efeito!
Considere estes três fragmentos de código:
A: h1
B: h1#content
C: <h1 id="content" style="color:
pink;">Heading</h1>A especificidade de A é 1 (seletor de um elemento)
A especificidade de B é 101 (uma referência de ID + um seletor de elemento)
A especificidade de C é 1000 (estilo embutido)
Como a terceira regra (C) tem o maior valor de especificidade (1000), este estilo declaração será aplicada.
Especificidade igual: a regra mais recente vence - Se a mesma regra for escrita duas vezes na folha de estilos externa, então a regra mais recente vence:
h1 {background-color: yellow;}
h1 {background-color: red;}Experimente você mesmo →
<!DOCTYPE html>
<html>
<head>
<style>
h1 {background-color: yellow;}
h1 {background-color: red;}
</style>
</head>
<body>
<h1>This is heading 1</h1>
</body>
</html>
Os seletores de ID têm maior especificidade que os seletores de atributos - Observe as três linhas de código a seguir:
div#a {background-color: green;}
#a {background-color: yellow;}
div[id=a] {background-color: blue;}Experimente você mesmo →
<!DOCTYPE html>
<html>
<head>
<style>
div#a {background-color: green;}
#a {background-color: yellow;}
div[id=a] {background-color: blue;}
</style>
</head>
<body>
<div id="a">This is a div</div>
</body>
</html>
a primeira regra é mais específica que as outras duas e, portanto, será aplicada.
Os seletores contextuais são mais específicos do que um único elemento seletor - A folha de estilo incorporada está mais próxima do elemento a ser estilizado. Então no seguinte situação
From external CSS file:
#content h1 {background-color: red;}
In HTML file:
<style>
#content h1 {background-color:
yellow;}
</style>a última regra será aplicada.
Um seletor de classe supera qualquer número de seletores de elemento - um seletor de classe como .intro supera h1, p, div, etc:
.intro {background-color: yellow;}
h1 {background-color:
red;}Experimente você mesmo →
<!DOCTYPE html>
<html>
<head>
<style>
.intro {background-color: yellow;}
h1 {background-color: red;}
</style>
</head>
<body>
<h1 class="intro">This is a heading</h1>
</body>
</html>
O seletor universal (*) e os valores herdados têm uma especificidade de 0 - O seletor universal (*) e os valores herdados são ignorados!