Opći kombinator braće i sestara (~) u CSS-u izgleda ovako u upotrebi:
.featured-image ~ p ( font-size: 90%; )U tom biste primjeru odabrali sve odlomke u članku koji dolaze nakon istaknute slike (element s nazivom klase „istaknuta slika“) i učinili ih malo manjima font-size.
Ovim se odabiru elementi na istoj razini hijerarhije. U ovom su primjeru .featured-imagei pelementi u istoj hijerarhiji. Ako je selektor nastavio nakon pili prije .featured-image, primjenjuju se uobičajena pravila. Dakle, i .featured-image ~ p spandalje bismo odabrali raspone koji su potomci bilo kakvih .featured-image ~ ppodudaranja.
Specifikacija za selektore razine 4 naziva ih "Slijedeći kombinaciju braće i sestara".
Demo
Evo još jednog primjera koji ističe sve pelemente koji slijede img:
img ~ p ( background-color: #FEF0B6; padding: 5px; )Što će rezultirati sljedećim:
Otkačeno
WebKit je nekad imao neobičnost gdje ih niste mogli koristiti s pseudo selektorima. Kao:
input:checked ~ div ( /* Wouldn't work */ )Ne znam točne verzije preglednika u kojima je ovo popravljeno, ali sada je popravljeno.
Više informacija
- Birači djece i braće ili sestara
- Slično susjednom kombinatoru braće i sestara.
- MDN dokumenti
Podrška preglednika
| Krom | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Bilo koji | 3+ | 1+ | 9+ | 7+ | Bilo koji | Bilo koji |