Obecný sourozenecký kombinátor (~) v CSS vypadá takto:
.featured-image ~ p ( font-size: 90%; )V tomto příkladu byste vybrali všechny odstavce v článku, které následují za doporučeným obrázkem (prvek s názvem třídy „doporučený obrázek“), a zmenšili je o něco menší font-size.
Tím se vybírají prvky na stejné úrovni hierarchie. V tomto příkladu .featured-imagejsou pprvky ve stejné hierarchii. Pokud selektor pokračoval za pnebo před .featured-image, platí normální pravidla. Takže .featured-image ~ p spanpřesto by si vybrat rozpětí, které jsou potomky jakýchkoliv .featured-image ~ pzápasů.
Specifikace pro selektory úrovně 4 je nazývá „Sledování kombinátorů na stejné úrovni“.
Ukázka
Tady je další příklad, který zdůrazňuje všechny pprvky, které následují img:
img ~ p ( background-color: #FEF0B6; padding: 5px; )Výsledkem bude následující:
Vtipy
WebKit míval vtípky, kde jste je nemohli použít s pseudo selektory. Jako:
input:checked ~ div ( /* Wouldn't work */ )Nevím přesné verze prohlížečů, kde to bylo opraveno, ale nyní je to opraveno.
Více informací
- Selektory pro děti a sourozence
- Podobně jako sousední sourozenecký kombinátor.
- Dokumenty MDN
Podpora prohlížeče
| Chrome | Safari | Firefox | Opera | TJ | Android | iOS |
|---|---|---|---|---|---|---|
| Žádný | 3+ | 1+ | 9+ | 7+ | Žádný | Žádný |