Saber fazer combinação de seletores CSS é uma das partes mais importantes para se formar uma regra CSS eficaz.
Existem métodos diferentes para se combinar seletores CSS. Os principais são (parênteses indicando o nível da Recomendação):
Seletor descendente
Padrão: E F
Corresponde a qualquer elemento F que seja um descendente (esteja “dentro”) de um elemento E.
Exemplo CSS: h1 em {color: blue; }
Exemplo HTML: <h1>será <em>azul</em></h1>
Corresponde a um elemento EM contido em um elemento H1.
Técnica básica e provavelmente a mais utilizada, que já estava presente no CSS Level 1, de 1996.
Seletor descendente direto
Padrão: E > F
Corresponde a qualquer elemento F que seja um filho direto (descendente de primeiro nível) de um elemento E.
Exemplo CSS: body > p { color: blue; }
Exemplo HTML:
|
1 2 3 |
<body> <p>Parágrafo azul.</p> </body> |
Exemplo onde não corresponde ao elemento <p>:
|
1 2 3 4 5 |
<body> <div> <p>Não é um parágrafo azul.</p> </div> </body> |
O elemento <p> é filho de um elemento <div>, portanto, as regras CSS não se aplicam.
Também é possível combinar seletores descendentes diretos com seletores descendentes, como em: div ul > li span.
Seletor irmão
Padrão: E ~ F
Este seletor para combinação de seletores CSS corresponde quando um elemento F é precedido por um elemento E (não necessariamente de imediato, como no caso de E > F).
Exemplo CSS: h1 ~ p { color: grey; }
Exemplo HTML:
|
1 2 3 |
<h1>Título</h1> <span>Recentemente publicado</span> <p>Parágrafo cinza.</p> |
Seletor irmão adjacente
Padrão: E + F
O seletor corresponde se E e F compartilham o mesmo pai e E precede imediatamente F.
Significa que seleciona todos os elementos F que são colocados imediatamente após os elementos E.
Nota: A regra de estilo é aplicada a um elemento que é correspondido pelo seletor F.
Exemplo CSS: h1 + h2 { opacity: 0.8; }
Exemplo HTML:
|
1 2 3 |
<h1>Título</h1> <h2>Subtítulo com pouca opacidade.</h2> <p>Paragraph</p> |
Exemplo onde não corresponde:
|
1 2 3 |
<h1>Título</h1> <p>Paragraph</p> <h2>Subtítulo com opacidade normal.</h2> |
Isso é porque <h2> não é seguido imediatamente após um elemento <h1>.
Muito útil, mas raramente usado.
Composto de vários seletores de classe ou ID
Padrão: .class1.class2(.classN) / #id.class1(.classN) / .class1(.classN)#id
Exemplo CSS: .modal.modal-red { border-color: red; }
Exemplo HTML:
|
1 2 3 |
<div class="modal modal-red"> Modal com borda vermelha </div> |
Exemplo NÃO funcionando:
|
1 2 3 4 5 |
<div class="modal"> <p class="modal-red"> Sem borda vermelha </p> </div> |
Isso é porque um elemento que é correspondido por .modal-red é um filho de .modal e não um elemento com 2 classes compostas.
Isso é complicado, mas muito útil se você seguir essas recomendações SMACSS (Scalable and Modular Architecture for CSS) Você pode ter:
- várias classes;
- seletor de ID e várias classes;
- várias classes mais seletor de ID;
- várias classes mais o seletor de ID e várias classes.
(O último caso é um pouco bobo, mas funciona)
Em Seletores CSS Nível 3 não havia muita novidade em relação à combinação de seletores, apenas o seletor de irmão adjacente.
Seletor de contexto (“seletor ascendente”)
Padrão: E:has(F)
Corresponde a um elemento E que é pai de um elemento F.
A correspondência do seletor pode ser identificada explicitamente ao colocar :has() em um dos seletores. Também pode ser explicado como um “seletor ascendente“.
Exemplo CSS:
a:has(> img) { border: 1px solid green; } faz com que links que tenham imagens dentro rrecebam uma borda verde.
dt:has(+ dt) { border: 1px solid red; } faz com que elementos <dt> imediatamente seguidos por outro <dt> recebam borda vermelha.
Conclusão sobre combinação de seletores CSS
Saber quais os tipos de combinação de seletores CSS e como usá-los é bastante importante para formar uma boa base de conhecimentos em CSS. Escrever este tipo de código é parte do dia-a-dia de quem trabalha com CSS e, para trabalhar bem, é preciso ter uma boa base.
Com certeza uma boa base sobre combinação de seletores CSS dá um match com ser um bom codificador de folhas de estilos. ;-)