Všeobecný kombinátor súrodencov (~) v CSS vyzerá takto:
.featured-image ~ p ( font-size: 90%; )V tomto príklade by ste vybrali všetky odseky v článku, ktoré nasledujú za odporúčaným obrázkom (prvok s názvom triedy „odporúčaný obrázok“), a zmenšili ich tak, aby boli o niečo menšie font-size.
Týmto sa vyberú prvky na rovnakej úrovni hierarchie. V tomto príklade .featured-imagesú pprvky v rovnakej hierarchii. Ak selektor pokračoval za palebo pred .featured-image, platia bežné pravidlá. Takže .featured-image ~ p spannapriek tomu by si vybrať rozpätie, ktoré sú potomkami akýchkoľvek .featured-image ~ pzápasov.
Špecifikácia selektora úrovne 4 ich nazýva „Nasledujúci súrodenecký kombinátor“.
Ukážka
Tu je ďalší príklad, ktorý zdôrazňuje všetky pprvky, ktoré nasledujú za img:
img ~ p ( background-color: #FEF0B6; padding: 5px; )Výsledkom bude:
Vtipy
WebKit mával problémy, keď ste ich nemohli používať s pseudo selektormi. Páči sa mi to:
input:checked ~ div ( /* Wouldn't work */ )Nepoznám presné verzie prehľadávačov, kde to bolo opravené, ale teraz je to opravené.
Viac informácií
- Selektory pre deti a súrodencov
- Podobne ako susedný kombinátor súrodencov.
- Dokumenty MDN
Podpora prehľadávača
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| akýkoľvek | 3+ | 1+ | 9+ | 7+ | akýkoľvek | akýkoľvek |