Splošni kombinator za brate in sestre (~) v CSS je videti takole v uporabi:
.featured-image ~ p ( font-size: 90%; )V tem primeru bi izbrali vse odstavke v članku, ki pridejo za predstavljeno sliko (element z imenom razreda »featured-image«), in jih naredili nekoliko manjše font-size.
S tem se izberejo elementi na isti hierarhični ravni. V tem primeru .featured-imageso pelementi v isti hierarhiji. Če je selektor nadaljeval mimo pali prej .featured-image, veljajo običajna pravila. Torej .featured-image ~ p spanbi še vedno izbral razpone, ki so potomci ne glede na .featured-image ~ pujemanje.
Specifikacija za izbirnike 4. stopnje jih pokliče "Sledenje kombinacijam bratov in sester".
Demo
Tu je še en primer, ki poudarja vse pelemente, ki sledijo img:
img ~ p ( background-color: #FEF0B6; padding: 5px; )Kar bo povzročilo naslednje:
Nenavadne
Včasih je imel WebKit domislico, kjer jih s psevdo izbirniki niste mogli uporabljati. Všeč mi je:
input:checked ~ div ( /* Wouldn't work */ )Ne vem natančnih različic brskalnikov, v katerih je bilo to popravljeno, zdaj pa je popravljeno.
Več informacij
- Izbirniki za otroke in brate
- Podobno kot sosednji kombinator brat in sestra.
- Dokumenti MDN
Podpora za brskalnik
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Kaj | 3+ | 1+ | 9+ | 7+ | Kaj | Kaj |