Saber como a especificidade CSS funciona é uma habilidade fundamental. Ele lhe dará uma compreensão mais profunda de como os valores de propriedade CSS são resolvidos quando duas ou mais regras de estilo correspondem ao mesmo conjunto de elementos HTML. A solução de problemas do seu CSS é mais fácil quando você pode determinar os valores de especificidade de seus seletores.
Por exemplo, quando há uma regra de estilo que não está funcionando conforme o esperado, provavelmente há outra regra de estilo em algum lugar que a está substituindo. Você poderá corrigir esses problemas rapidamente aprendendo sobre a especificidade do CSS para criação de seu site.
Como funciona
Se vários seletores CSS estiverem direcionando o mesmo conjunto de elementos HTML e se os seletores CSS estiverem tentando atribuir a mesma propriedade/propriedades aos elementos HTML, o seletor com o valor de especificidade mais alto “vencerá”. Em outras palavras, o seletor mais específico consegue atribuir seus valores de propriedade aos elementos HTML.
É mais fácil explicar com um exemplo. Digamos que este é o nosso HTML:
<div class=”container”> <div id=”main”> <p> <a href=”#”>Link</a> </p> </div> </div>
Queremos atribuir uma cor à <a>tag acima. Há muitas maneiras de direcionar essa <a>tag usando seletores CSS.
Abaixo estão cinco regras de estilo que podem fazer o trabalho:
#main a { color: green; } p a { color: yellow; } .container #main a { color: pink; } div #main p a { color: orange; } a { color: red; }
Como todas as cinco regras de estilo estão tentando atribuir um colorvalor de propriedade à <a>tag, o navegador fica confuso: o link deve ser verde, amarelo, rosa, laranja ou vermelho? O navegador precisa de uma forma de negociar qual cor deve dar à nossa <a>tag. A forma como o navegador toma a decisão é primeiro calculando o valor de especificidade de cada seletor.
Em seguida, ele verifica qual seletor tem o valor mais alto. Esse é o vencedor. Esse será o seletor que terá a honra de definir o colorvalor da propriedade da nossa <a>tag.
Então nossa <a>tag é rosa . Se removermos .container #main ade nossa folha de estilo, nosso link ficará laranja porque o próximo seletor mais específico é div #main p a.
Como eu sabia os valores de especificidade para cada seletor? Eu os calculei.
Descobrindo os valores de especificidade
Entender as regras de especificidade do seletor CSS parecerá complicado no começo. Por exemplo, quando eu ainda estava aprendendo sobre a especificidade do CSS, tive que escrever meus cálculos em um pedaço de papel.
Assim como na escola ao resolver problemas de matemática. Levará tempo e prática antes que tudo isso se torne uma segunda natureza. OK, então vamos ver como calcular o valor de especificidade de um seletor.
O método que vou mostrar para determinar os valores de especificidade é das especificações do W3C CSS Selectors Level 3 .
