Muitas pessoas acham o CSS complexo. Eles apresentam várias desculpas: a falta de capacidade de entender CSS ou CSS é ruim por si só. Mas a realidade é que as pessoas simplesmente não encontraram tempo para realmente estudá-lo. Se você está lendo este artigo, está interessado em aprender CSS e é ótimo!
Qual é a especificidade do CSS?
Você já escreveu um estilo, mas ele não funciona, então você adiciona
! Importante (ou não), e ainda assim não funciona? Então você olha para o Devtools e percebe que outro estilo se sobrepõe ao seu em algum lugar?
Esta é a especificidade do CSS! É assim que o navegador seleciona qual dos seletores concorrentes aplicar ao elemento. Quando o navegador vê que dois ou mais seletores correspondem ao mesmo elemento e os seletores têm regras conflitantes, ele precisa de uma maneira de descobrir quais das regras a serem aplicadas a esse elemento. A maneira como isso acontece é chamado de "valor da especificidade do CSS".
Antes de nos aprofundarmos na especificidade do CSS, lembre-se do seguinte:- A especificidade do CSS é importante apenas quando vários seletores afetam o mesmo elemento. O navegador precisa de uma maneira de descobrir qual estilo aplicar ao elemento correspondente quando existirem valores conflitantes de propriedade.
- Quando dois ou mais seletores correspondentes têm o mesmo valor de especificidade (peso), o navegador seleciona o seletor correspondente “mais recente” que aparece mais perto da parte inferior da lista de seletores correspondentes. O parágrafo a seguir explica o que é uma "lista de seletores adequados".
- O navegador cria uma "lista de seletores adequados" combinando todos os estilos na página da web e filtrando aqueles que não correspondem ao elemento "atualmente sendo estilizado" . Os primeiros seletores na folha de estilo estão no topo da lista e os últimos, na parte inferior.
- A propriedade style de um elemento possui um valor de especificidade maior que os seletores nas folhas de estilo, a menos que haja ! Importante no seletor de folhas de estilo.
- O uso ! Important (que é considerado uma prática ruim em alguns casos) altera a especificidade do seletor. Quando dois seletores têm a mesma especificidade, o seletor com ! Importante vence. E quando os dois tiverem ! Importante , o seletor "mais recente" vence.
Valor da especificidade
Agora podemos seguir como o navegador determina a especificidade do seletor.
A especificidade do seletor pode ser representada como uma sequência de três dígitos separada por um hífen (ou qualquer outra coisa): “2–4–1”. O primeiro dígito é o número de seletores de ID presentes, o segundo é o número de seletores de classe, seletores de atributo e pseudo-classe e o terceiro é o número de seletores de tipo e pseudo-elemento disponíveis. Por exemplo:
#red.blue // 1-1-0 #green // 1-0-0 div.yellow#red // 1-1-1 .red.blue.yellow // 0-3-0
Definição das mais "específicas"
Para determinar qual seletor é mais específico, você pode comparar cada um dos três valores.
Digamos que você tenha
1-1-1 e
0-3-0 , como nos dois últimos exemplos, e você precisa determinar qual deles tem mais especificidade. Primeiro você compara os últimos valores
1 e
0 e, neste caso,
1 vence. Isso significa que, no momento,
div.yellow#red possui um valor de especificidade maior ... mas ainda não terminamos de comparar os valores.
Em seguida, compare os valores
1 e
3 ,
3 vitórias. Atualmente .red.blue.yellow possui um valor de especificidade maior.
Por fim, comparamos os primeiros valores,
1 e
0 e
1 vitórias, para que
div.yellow#red tenha mais especificidade que
.red.blue.yellow .
A especificidade CSS do seletor fornece uma boa explicação de por que nenhum número de seletores de classe pode substituir o seletor de ID.
Pequenos avisos
3 "armadilhas" para estar ciente de:- Escrevi acima que o segundo número em uma sequência de números consistindo em três é "o número de seletores de classe, seletores de atributos e pseudo-classes". Isso é verdade em todos os casos, exceto quando é
:not() pseudo-classe. Quando é :not() pseudo-classe, não a consideramos, mas simplesmente a ignoramos. Mas os seletores dentro dele não são ignorados, são considerados normais. - A especificidade do CSS entende a "forma" de um seletor. Isso significa que, quando você tem
*[id="yellow"] e #yellow , o primeiro é tratado como um seletor de atributos. - Somente o seletor universal
* não conta para a especificidade do seletor. No parágrafo [id="yellow"] acima, parte do seletor é o que realmente importa.
Espero que este artigo seja fácil de entender e ajude a entender o que é a especificidade do CSS. Agora você pode ver o estilo e determinar facilmente o quão "específico" é.