Prioridades e Hierarquias no CSS
- Johnny Wellington
- 21 de nov. de 2024
- 5 min de leitura
Atualizado: 2 de dez. de 2024
O objetivo deste tópico é ajudar você a resolver problemas frustrantes em que alterações de estilo parecem não funcionar, mesmo quando você tenta usar !important. Vamos explorar como a especificidade (a maneira como os navegadores definem quais valores de propriedades são os mais relevantes para o elemento a ser utilizado) e a hierarquia de seletores no CSS podem impactar o comportamento dos estilos e como evitá-los de maneira eficiente.
Seletores CSS
Vamos começar falando sobre os seletores CSS. Eles nos permitem selecionar e aplicar estilos a elementos HTML de várias maneiras. A forma como você referencia esses elementos influencia diretamente como as alterações serão interpretadas pelo navegador, pois alguns seletores têm um peso de especificidade maior que outros, o que afeta a ordem em que os estilos são aplicados.
Alguns dos seletores mais comuns são:
#id: Seleciona o elemento que tem o atributo id.
Exemplo: #um-id aplicaria estilos ao elemento <div id="um-id">...</div>.
h1: Seleciona todos os elementos <h1> em um documento HTML.
Exemplo: h1 aplicaria estilos a todos os cabeçalhos de nível 1.
p.classe: Seleciona todos os elementos <p> com a classe "classe".
Exemplo: p.classe aplicaria estilos a <p class="classe">...</p>.
.div, p: Seleciona todos os elementos com a classe "div" e todos os elementos <p>.
Exemplo: .div, p aplicaria estilos a <div class="div">...</div> e a <p>...</p>.
div > h3: Seleciona todos os elementos <h3> que são filhos diretos de um <div>.
Exemplo: <div><h3>...</h3></div> será selecionado, mas <div><span><h3>...</h3></span></div> não.
p ~ ul: Seleciona todos os elementos <ul> que são irmãos de um <p>, ou seja, ambos no mesmo nível, com o <ul> vindo após o <p>.
Exemplo: <p>Texto</p><ul>...</ul>.
.um-nome: Seleciona todos os elementos com a classe "um-nome".
Exemplo: .um-nome aplicaria estilos a <div class="um-nome">...</div>.
[target]: Seleciona todos os elementos que possuem o atributo target, independentemente do valor.
Exemplo: <a href="..." target="_blank">Link</a>.
[target=_blank]: Seleciona todos os elementos cujo atributo target é exatamente igual a "_blank".
Exemplo: <a href="..." target="_blank">Link</a>.
[title~="Show"]: Seleciona elementos cujo atributo title contém a palavra "Show" como palavra isolada.
Exemplo: <div title="Assistir Show"> será selecionado, mas <div title="Mostrar agora"> não.
[href^="https"]: Seleciona todos os elementos cujo valor do atributo href começa com "https".
Exemplo: <a href="https://site.com">Link</a> será selecionado, mas <a href="http://site.com">Link</a> não.
[href$=".png"]: Seleciona todos os elementos cujo valor do atributo href termina com ".png".
Exemplo: <a href="imagem.png">Imagem</a>.
p:nth-child(2): Seleciona o segundo filho <p> de um elemento pai.
Exemplo: <div><p></p><p></p></div>. O segundo <p> será selecionado.
p:nth-of-type(2): Seleciona o segundo <p> dentro de seu elemento pai, ignorando outros tipos de elementos.
Exemplo: <div><p></p><span></span><p></p></div>. O segundo <p> será selecionado.
p:only-child: Seleciona todos os elementos <p> que são os únicos filhos de seu elemento pai.
Exemplo: <div><p></p></div> será selecionado, mas <div><p></p><span></span></div> não será.
:not(h1): Seleciona todos os elementos que não sejam <h1>.
Exemplo: :not(h1) aplicaria estilos a qualquer elemento que não fosse um <h1>.
:root: Seleciona o elemento raiz do documento, geralmente o <html>.
Exemplo: :root é frequentemente usado para definir variáveis CSS globais
Peso dos Seletores
Cada seletor no CSS possui um peso de especificidade, que define sua prioridade na aplicação dos estilos. Seletores básicos, como de tipo ou elemento (p, h1, etc.), têm um peso menor em comparação a seletores de classe, ID ou atributos.
Seletores de tipo (elemento):
Exemplo: div, p, h1
Especificidade: 0,0,0,1 (1 ponto)
2. Seletores de classe, pseudo-classes e atributos:
Exemplo: .classe, :hover, [type="text"]
Especificidade: 0,0,1,0 (10 pontos)
3. Seletores de ID:
Exemplo: #meu-id
Especificidade: 0,1,0,0 (100 pontos)
4. Estilos inline:
Exemplo: <div style="color: red;">
Especificidade: 1,0,0,0 (1000 pontos)
5. !important:
Não faz parte da especificidade, mas tem a maior prioridade, sobrepondo qualquer outro estilo.
Mais alguns exemplos de pontuação
Seletor com especificidade de 0,0,0,4 pontos
<div> <ul> <li> <a href="#">Item 1</a> </li> <li> <a href="#">Item 2</a> </li> </ul></div>div ul li a { color: red;}Explicação:
div: Seleciona o elemento <div>.
ul: Seleciona o elemento <ul> dentro do <div>.
li: Seleciona cada elemento <li> dentro do <ul>.
a: Seleciona os elementos <a> (links) dentro de cada <li>.
Neste exemplo, o seletor div ul li a seleciona todos os links <a> que estão dentro de uma lista <ul>, que, por sua vez, está dentro de um <div>. Como você tem 4 elementos na sequência (div > ul > li > a), a especificidade desse seletor será 0,0,0,4 (quatro pontos na primeira casa, referente aos quatro elementos).
Seletor com especificidade de 0,0,1,3 pontos
<div class="div content"> <ul> <li>Item 1</li> <li>Item 2</li> </ul></div>.div.content ul li { color: blue;}Explicação:
.div.content: A classe content adiciona 1 ponto na segunda casa de especificidade, enquanto .div também é uma classe. O seletor .div.content conta como 1 ponto para a classe no total.
ul e li: São elementos, somando 3 pontos na primeira casa (um ponto para cada elemento).
A especificidade total fica 0,0,1,3:
1 ponto na segunda casa (por causa da classe .content),
3 pontos na primeira casa (por causa dos elementos div, ul, e li).
Seletor com especificidade de 0,0,1,1 pontos
<a href="#">Clique aqui</a>a:hover { color: red;}Explicação:
a: O seletor de tipo ou elemento (a, que representa um link) adiciona 1 ponto na primeira casa.
:hover: A pseudo-classe :hover, que é aplicada quando o link é "hovered" (o mouse passa sobre ele), adiciona 1 ponto na segunda casa, já que pseudo-classes têm o mesmo peso que classes.
Assim, a especificidade total é 0,0,1,1:
1 ponto na segunda casa (pela pseudo-classe :hover),
1 ponto na primeira casa (pelo elemento a).
Conclusão
Compreender especificidade e a hierarquia dos seletores no CSS é fundamental para facilitar a manutenção e alteração de projetos e principalmente garantir que os estilos sejam aplicados conforme o esperado. O que vai evitar o uso excessivo de !important, que pode acabar mascarando problemas na organização do seu CSS e aumentar a dificuldade de manter o código, por isso deve ser utilizado com cautela.
Como podemos aplicar estilos de maneira eficaz:
Mantenha seu CSS organizado e claro.
Utilizar seletivamente seletores mais específicos quando necessário.
Evitar o uso excessivo de !important.
Com uma boa compreensão dessas regras, você poderá escrever CSS mais eficiente, fácil de manter e com menos conflitos. A prática é muito importante para dominar essas regras, então não hesite em testar diferentes seletores e ver como eles afetam o comportamento dos seus estilos!
Agora é a sua vez! Já enfrentou alguma situação complicada com a especificidade e hierarquia de seletores no CSS? Como você resolveu? Compartilhe suas experiências ou dúvidas nos comentários e vamos aprender juntos! 😊
Comments