Den generelle søskendekombinator (~) i CSS ser sådan ud i brug:
.featured-image ~ p ( font-size: 90%; )I dette eksempel vælger du alle afsnit i en artikel, der kommer efter det fremhævede billede (et element med klassenavnet "featured-image") og gør dem til lidt mindre font-size.
Dette vælger elementer på det samme hierarkiniveau. I dette eksempel .featured-imageog pelementerne er i det samme hierarki. Hvis vælgeren fortsatte forbi peller før .featured-image, gælder de normale regler. Så .featured-image ~ p spanstadig ville vælge spænd, der stammer fra uanset hvilke .featured-image ~ pmatches.
Specifikationen for vælgere niveau 4 kalder disse “Følgende søskendekombinatorer”.
Demo
Her er et andet eksempel, der fremhæver alle de pelementer, der følger en img:
img ~ p ( background-color: #FEF0B6; padding: 5px; )Hvilket vil resultere i følgende:
Quirks
WebKit plejede at have en quirk, hvor du ikke kunne bruge disse med pseudo-vælgere. Synes godt om:
input:checked ~ div ( /* Wouldn't work */ )Jeg kender ikke de nøjagtige versioner af browsere, hvor dette blev rettet, men det er rettet nu.
Mere information
- Børne- og søskendevælgere
- Svarende til den tilstødende søskenskombinator.
- MDN Docs
Browsersupport
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Nogen | 3+ | 1+ | 9+ | 7+ | Nogen | Nogen |