De algemene combinator tussen broers en zussen (~) in CSS ziet er in gebruik als volgt uit:
.featured-image ~ p ( font-size: 90%; )In dat voorbeeld zou je alle alinea's in een artikel selecteren die na de uitgelichte afbeelding komen (een element met de klassenaam "featured-image") en ze iets kleiner maken font-size.
Hiermee worden elementen op hetzelfde hiërarchieniveau geselecteerd. In dit voorbeeld .featured-imageen de pelementen bevinden zich in dezelfde hiërarchie. Als de selector voorbij pof ervoor .featured-imageis doorgegaan , zijn de normale regels van toepassing. Dus .featured-image ~ p spanzou nog steeds bereiken selecteren die afstammen van welke .featured-image ~ povereenkomsten dan ook.
De specificatie voor selectors niveau 4 noemt deze "Following Sibling Combinators".
Demo
Hier is nog een voorbeeld dat alle pelementen belicht die volgen op een img:
img ~ p ( background-color: #FEF0B6; padding: 5px; )Wat resulteert in het volgende:
Eigenaardigheden
WebKit had vroeger een eigenaardigheid waarbij je deze niet kon gebruiken met pseudo-selectors. Leuk vinden:
input:checked ~ div ( /* Wouldn't work */ )Ik weet niet in welke exacte versies van browsers dit is opgelost, maar het is nu opgelost.
Meer informatie
- Kiezers voor kinderen en broers en zussen
- Vergelijkbaar met de aangrenzende broer / zuscombinator.
- MDN Docs
Browser-ondersteuning
| Chrome | Safari | Firefox | Opera | D.W.Z | Android | iOS |
|---|---|---|---|---|---|---|
| Ieder | 3+ | 1+ | 9+ | 7+ | Ieder | Ieder |