O combinador irmão geral (~) em CSS tem a seguinte aparência em uso:
.featured-image ~ p ( font-size: 90%; )Nesse exemplo, você selecionaria todos os parágrafos em um artigo que vêm depois da imagem em destaque (um elemento com um nome de classe de “imagem em destaque”) e os tornaria ligeiramente menores font-size.
Isso seleciona elementos no mesmo nível de hierarquia. Neste exemplo, .featured-imageos pelementos estão na mesma hierarquia. Se o seletor continuou após pou antes .featured-image, as regras normais se aplicam. Portanto, .featured-image ~ p spanainda selecionaria extensões que são descendentes de qualquer .featured-image ~ pcorrespondência.
A especificação para seletores de nível 4 chama esses “Combinadores Irmãos Seguintes”.
Demo
Aqui está outro exemplo que destaca todos os pelementos que seguem um img:
img ~ p ( background-color: #FEF0B6; padding: 5px; )O que resultará no seguinte:
Peculiaridades
O WebKit costumava ter uma peculiaridade em que não era possível usá-los com pseudo seletores. Gostar:
input:checked ~ div ( /* Wouldn't work */ )Não sei as versões exatas dos navegadores em que isso foi corrigido, mas agora está corrigido.
Mais Informações
- Seletores de filhos e irmãos
- Semelhante ao Combinador de Irmãos Adjacentes.
- MDN Docs
Suporte para navegador
| cromada | Safári | Raposa de fogo | Ópera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Nenhum | 3+ | 1+ | 9+ | 7 + | Nenhum | Nenhum |