CSS: n yleinen sisarusyhdistin (~) näyttää tältä käytöltä:
.featured-image ~ p ( font-size: 90%; )Tässä esimerkissä valitset kaikki artikkelin kappaleet, jotka tulevat esillä olevan kuvan jälkeen (elementti, jonka luokan nimi on “Featured-image”) ja pienennät niitä hieman font-size.
Tämä valitsee elementit samalla hierarkiatasolla. Tässä esimerkissä .featured-imageja pelementit ovat samassa hierarkiassa. Jos valitsin jatkoi edellisen ptai edellisen jälkeen .featured-image, normaalit säännöt ovat voimassa. Joten .featured-image ~ p spansilti valitsisi alueet, jotka ovat minkä tahansa .featured-image ~ pottelun jälkeläisiä .
Valitsijien taso 4: n tekniset tiedot kutsuvat näitä "Seuraajaksi sisarusyhdistelmiksi".
Demo
Tässä on toinen esimerkki, joka tuo esiin kaikki seuraavat pelementit img:
img ~ p ( background-color: #FEF0B6; padding: 5px; )Mikä johtaa seuraavaan:
Omituisuudet
WebKitillä oli aiemmin omituisuus, jossa et voinut käyttää näitä pseudovalitsimien kanssa. Kuten:
input:checked ~ div ( /* Wouldn't work */ )En tiedä tarkkoja selainten versioita, joissa tämä on korjattu, mutta se on nyt korjattu.
Lisää tietoa
- Lasten ja sisarusten valitsimet
- Samanlainen kuin vieressä oleva sisarusyhdistin.
- MDN-dokumentit
Selaimen tuki
| Kromi | Safari | Firefox | Ooppera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Minkä tahansa | 3+ | 1+ | 9+ | 7+ | Minkä tahansa | Minkä tahansa |