Le combinateur général des frères (~) dans CSS ressemble à ceci en cours d'utilisation:
.featured-image ~ p ( font-size: 90%; )Dans cet exemple, vous sélectionnerez tous les paragraphes d'un article qui viennent après l'image sélectionnée (un élément avec un nom de classe «image-vedette») et les réduiraient légèrement font-size.
Cela sélectionne les éléments au même niveau de hiérarchie. Dans cet exemple .featured-imageet les péléments sont dans la même hiérarchie. Si le sélecteur continue au-delà du pou avant .featured-image, les règles normales s'appliquent. Donc .featured-image ~ p span, sélectionnerait toujours des travées qui sont des descendants de tout .featured-image ~ pmatch.
La spécification pour les sélecteurs de niveau 4 appelle ces «Combinateurs frères suivants».
Démo
Voici un autre exemple qui met en évidence tous les péléments qui suivent un img:
img ~ p ( background-color: #FEF0B6; padding: 5px; )Ce qui entraînera ce qui suit:
Bizarreries
WebKit avait une bizarrerie où vous ne pouviez pas les utiliser avec des pseudo sélecteurs. Aimer:
input:checked ~ div ( /* Wouldn't work */ )Je ne connais pas les versions exactes des navigateurs où cela a été corrigé, mais c'est maintenant corrigé.
Plus d'information
- Sélecteurs enfants et frères et sœurs
- Similaire au combinateur de frères et sœurs adjacents.
- Documents MDN
Prise en charge du navigateur
| Chrome | Safari | Firefox | Opéra | C'EST À DIRE | Android | iOS |
|---|---|---|---|---|---|---|
| Tout | 3+ | 1+ | 9+ | 7+ | Tout | Tout |