Como a especificidade do CSS funciona no navegador

Michael Ozoemena Blocked Unblock Seguir Seguindo 9 de janeiro

Muitas pessoas acham o CSS realmente difícil. Eles culpam que em uma série de razões, como eles não estão conectados para entender CSS ou CSS é ruim ou qualquer número de outras razões. Mas a maioria das pessoas acha o CSS difícil porque não tem tempo para realmente aprender. Se você está lendo isso, provavelmente é porque você está interessado em se tornar melhor em CSS, e isso é incrível!

Qual é a especificidade do CSS?

Você já escreveu um estilo e ele simplesmente não estava funcionando, então você adiciona !important (ou não) e ainda assim não funcionou? Então você dá uma olhada nos Devtools apenas para descobrir que algum outro estilo em algum lugar está substituindo seu estilo?

Bem, isso é especificidade CSS em jogo lá! É como o navegador escolhe qual dos seus seletores competidores se aplica a um elemento. Quando o navegador vê que dois ou mais dos seus seletores correspondem ao mesmo elemento e os seletores têm regras conflitantes, ele precisa descobrir uma das regras a serem aplicadas a esse elemento. A maneira como isso acontece é através dessa coisa chamada “valor de especificidade CSS”.

Antes de nos aprofundarmos na especificidade do CSS, você precisa observar estas coisas:

  1. 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 a um elemento correspondente quando houver valores de propriedades conflitantes, e a especificidade do CSS é o modo como ele faz isso.
  2. Quando dois ou mais seletores correspondentes têm o mesmo valor de especificidade, o navegador seleciona o seletor de correspondência "mais recente" – o seletor que ocorre mais próximo da parte inferior da lista de seletores correspondentes. O próximo ponto explica o que é "lista de seletores correspondentes".
  3. O navegador forma a “lista de seletores correspondentes”, combinando todos os estilos em uma página da web e filtrando todos os estilos que não correspondem ao elemento “atualmente em estilo”. Os primeiros seletores na folha de estilo estão no topo da lista e os últimos seletores estão na parte inferior da lista.
  4. A propriedade de style em um elemento tem um valor de especificidade maior que os seletores em folhas de estilo, exceto quando houver !important no seletor de folha de estilo.
  5. Usar !important (que é considerado uma prática ruim em certos casos) altera a especificidade de um seletor. Quando dois seletores têm igual especificidade, o seletor com !important ganha. E quando os dois têm, é !important o seletor “mais recente” vença.

O valor da especificidade.

Agora que temos essas coisas fora do caminho, podemos agora ver como o navegador determina os valores de especificidade de um seletor.

A especificidade de um seletor pode ser representada como uma cadeia de três dígitos, delimitada por um hífen (ou qualquer coisa que você queira): “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 atributos e pseudo-classes presentes, e o terceiro é o número de seletores de tipos e pseudo-elementos presentes. Por exemplo:

 # red.blue // 1-1-0 
 #green // 1-0-0 
 div.yellow # vermelho // 1-1-1 
 .red.blue.yellow // 0-3-0 

Determinando o mais "específico"

Para determinar qual seletor tem mais especificidade, 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. Você primeiro compara os últimos valores 1 e 0 e, neste caso, 1 ganha. Isso significa que neste ponto o div.yellow#red tem um valor de especificidade maior… mas nós não terminamos comparando os valores.

Em seguida, compare os segundos valores 1 e 3 e 3 vitórias e novamente. Neste ponto, o .red.blue.yellow tem um valor de especificidade maior, mas ainda não terminamos.

Finalmente, comparamos os primeiros valores, 1 e 0 , e 1 ganha, então div.yellow#red tem mais especificidade que .red.blue.yellow .

É assim que o navegador determina a especificidade CSS de um seletor e fornece uma boa explicação do motivo pelo qual nenhum número de seletores de classe pode substituir um seletor de ID .

Pequenos avisos

Existem três “dicas” que eu gostaria de falar:

  1. Anteriormente, mencionei que o segundo número na sequência de três números do valor de especificidade “é o número de seletores de classe, seletores de atributos e pseudo-classes presentes” e isso é verdade em todos os casos, exceto quando é o :not() pseudo-classe estamos falando. Quando é a pseudo-classe :not() , não contamos, simplesmente a ignoramos. Mas os seletores dentro dele também não são ignorados, eles são contados normalmente.
  2. Especificidade CSS entende o "formulário" de um seletor. Isso significa que quando você tem *[id="yellow"] e #yellow , o primeiro é tratado como um seletor de atributos (e é), embora ambos basicamente estejam selecionando a mesma coisa.
  3. O seletor universal * por si só não é contado para o valor de especificidade de um seletor. No ponto acima, a parte [id="yellow"] do seletor é o que realmente conta.

Conclusão

Espero que este artigo tenha sido fácil de entender e tenha ajudado você a entender melhor como funciona a especificidade do CSS. Agora você pode ver estilos e ser capaz de dizer quão "específico" é um estilo.

Se esse não for o caso e você tiver alguma pergunta ou comentário, fico feliz em ter uma discussão com você na seção de comentários ou no twitter @theozmic .

Lembre-se de deixar um clap ou dois ou cinquenta se você gostou deste artigo.