Combinação de seletores CSS

Saber fazer combinação de seletores CSS é importante para se formar uma regra CSS eficaz. Veja maneiras de se fazer combinações de seletores e não erre mais!

Ir para o artigo

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>&lt;/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:

Exemplo onde não corresponde ao elemento <p>:

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:

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: 

Exemplo onde não corresponde:

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: 

Exemplo NÃO funcionando:

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.  ;-)

E-book com 10 dicas para montar seu portfolio altamente eficiente e conseguir muito mais clientes e projetos!

Download GRÁTIS