Parágrafo azul.
```
Exemplo onde não corresponde ao elemento ``, 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:**
```html
Título
Recentemente publicado
Parágrafo cinza.
```
## 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 r_egra de estilo é aplicada a um elemento que é correspondido pelo seletor `F`._
**Exemplo CSS:** `h1 + h2 { opacity: 0.8; }`
**Exemplo HTML:**
```html
Título
Subtítulo com pouca opacidade.
Paragraph
```
Exemplo **onde não corresponde:**
```html
Título
Paragraph
Subtítulo com opacidade normal.
```
_Isso é porque `
` **não é seguido imediatamente** após um elemento ``._
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:**
```html
Modal com borda vermelha
```
**Exemplo NÃO funcionando**:
```html
```
_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)](http://smacss.com/) 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](http://www.w3.org/TR/css3-selectors/) 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 `` imediatamente seguidos por outro `` 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. ;-)
---
Fonte: [dpw - desenvolvimento para web](https://dpw.dev/) (pt-BR).
Guia para agentes: https://dpw.dev/llms.txt
Índice completo: https://dpw.dev/sitemap-index.xml
Feed: https://dpw.dev/rss.xml