# Como selecionar irmãos anteriores com CSS usando :has()
> Seletor de irmão anterior com :has() em CSS puro. Nova pseudo-classe revolucionária para estilos baseados em descendentes e contexto. Use agora!
URL: https://dpw.dev/css/irmao-anterior-css-has/
Publicado em: 2023-04-03
Categoria: css
Autor: Tárcio Zemel
Uma das limitações mais enlouquecedoras do CSS foi por muito tempo sua incapacidade de selecionar elementos com base em seus filhos ou irmãos anteriores, principalmente, **como selecionar irmãos anteriores com CSS**.
Isso impossibilitou a construção de seletores CSS que pudessem ter como alvo irmãos anteriores de um elemento, mas a pseudoclasse `has:()` (junto com `:not()`, `:where()` e `:is()` dos seletores de nível 4) meio que fez com que as antigas limitações caíssem e abriu um novo mundo de possibilidades ao trabalhar com seletores CSS.
## Como selecionar o irmão anterior
Imagine que existe uma série de elementos e se deseja selecionar e estilizar aquele que vem antes do círculo:
```html
```
O combinador irmão adjacente (`+`) pode selecionar um elemento que segue imediatamente outro elemento, e podemos combiná-lo com `:has()` para selecionar apenas o `.box` imediatamente seguido por um `.circle` (ou da perspectiva do círculo, seu anterior irmão):
```typescript
.box:has(+ .circle) {
height: 40px;
width: 40px;
}
```
Você pode pensar neste seletor como (i) selecionando todas as caixas e, em seguida, (ii) filtrando os elementos apenas para aqueles que correspondem ao padrão "caixa + círculo", que retornará apenas o irmão anterior do círculo.
Se ainda não conhece o seletor `:has()`, confira nosso vídeo:
[Vídeo no YouTube](https://www.youtube.com/watch?v=Ia_4XdisCGQ)
## Como selecionar o enésimo (nth) irmão anterior
É possível usar o combinador irmão adjacente para selecionar qualquer elemento específico que precede outro.
Podemos selecionar o segundo irmão anterior usando 2 combinadores de irmãos adjacentes:
```typescript
.box:has(+ * + .circle) {
height: 40px;
width: 40px;
}
```
Se desejar, você também pode definir o escopo do seletor para uma classe (em vez do universal `*`). Neste caso, irmãos `.box`:
```typescript
.box:has(+ .box + .circle) {
height: 40px;
width: 40px;
}
```
Esse seletor pode ser difícil de lidar com o parse. Pode ajudar pensar nisso como selecionar todas as caixas (`.box`) e, em seguida, filtrar esses elementos para que o `.box` restante seja aquele que corresponda ao padrão "self + box + circle", que será apenas o segundo irmão anterior .
Se você quiser selecionar o terceiro irmão anterior, você pode usar 3 combinadores de irmãos adjacentes:
```typescript
.box:has(+ * + * + .circle) {
height: 40px;
width: 40px;
}
```
E assim por diante. Você pode continuar adicionando combinadores de irmãos adjacentes (`+`) pelo tempo que desejar, para selecionar qualquer enésimo elemento anterior.
## Como selecionar todos os irmãos anteriores
Se você quiser selecionar todos os irmãos anteriores, pode combinar `:has()` com o combinador geral de irmãos (`~`), que corresponde ao segundo elemento desde que siga o primeiro, independentemente de sua posição:
```typescript
.box:has(~ .circle) {
height: 40px;
width: 40px;
}
```
Em outras palavras, desde que o `.box` neste exemplo seja seguido por um `.circle` em algum ponto, o `.box` será selecionado e estilizado.
## Como selecionar todos os irmãos anteriores, exceto o irmão adjacente
Finalmente, podemos combinar o combinador irmão geral (`~`) com o combinador irmão adjacente (`+`) e selecionar todos os elementos anteriores, exceto o mais adjacente:
```typescript
.box:has(~ * + .circle) {
height: 40px;
width: 40px;
}
```
Este seletor seleciona qualquer `.box` que corresponda ao padrão "auto seguido por em qualquer ponto uma caixa + círculo".
## Conclusão
Em qualquer tecnologia, em especial tecnologias Web, é de se esperar que antigas limitações sejam superadas com seu avanço e chegada de novas features.
Aqui no dpw já dissemos há muito tempo que :has() foi uma das principais features de CSS _desde o surgimento da linguagem_. Ainda levará anos para que seu potencial real de uso seja descoberto.
De qualquer maneira, agora você já sabe **como selecionar irmãos anteriores com CSS usando `:has()`** e esse novo poder de CSS, certamente, será bastante útil em muitas situações de estilização.
---
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