Den generelle søskenkombinatoren (~) i CSS ser slik ut i bruk:
.featured-image ~ p ( font-size: 90%; )I det eksemplet velger du alle avsnitt i en artikkel som kommer etter det valgte bildet (et element med klassenavnet "featured-image") og gjør dem til litt mindre font-size.
Dette velger elementer på samme hierarkinivå. I dette eksemplet .featured-imageog pelementene er i samme hierarki. Hvis velgeren fortsatte forbi peller før .featured-image, gjelder de vanlige reglene. Så .featured-image ~ p spanfortsatt ville du velge spenn som stammer fra uansett .featured-image ~ psamsvar.
Spesifikasjonen for velgere nivå 4 kaller disse “Following Sibling Combinators”.
Demo
Her er et annet eksempel som fremhever alle pelementene som følger en img:
img ~ p ( background-color: #FEF0B6; padding: 5px; )Hvilket vil resultere i følgende:
Quirks
WebKit pleide å ha en sære ting der du ikke kunne bruke disse med pseudovalgere. Som:
input:checked ~ div ( /* Wouldn't work */ )Jeg vet ikke de nøyaktige versjonene av nettlesere der dette ble løst, men det er løst nå.
Mer informasjon
- Barne- og søskenvelgere
- I likhet med den tilstøtende søskenkombinatoren.
- MDN Docs
Nettleserstøtte
| Chrome | Safari | Firefox | Opera | DVS | Android | iOS |
|---|---|---|---|---|---|---|
| Noen | 3+ | 1+ | 9+ | 7+ | Noen | Noen |