A CSS-ben az általános testvérkombinátor (~) így néz ki:
.featured-image ~ p ( font-size: 90%; )Ebben a példában kiválasztanád a cikk összes bekezdését, amely a kiemelt kép után következik (egy elem, amelynek osztályneve „kiemelt kép”), és kissé kisebbre tennéd őket font-size.
Ez ugyanazon hierarchia szinten választja ki az elemeket. Ebben a példában .featured-imageés az pelemek azonos hierarchiában vannak. Ha a választó a pvagy azelőtt haladt tovább .featured-image, a szokásos szabályok érvényesek. Tehát .featured-image ~ p spantovábbra is olyan szelvényeket választana, amelyek bármilyen .featured-image ~ pmeccs leszármazottai .
A 4. szintű szelektorok specifikációi ezeket „Következő testvérkombinátoroknak” nevezik.
Demó
Itt van egy másik példa, amely kiemeli az összes pelemet, amely követi img:
img ~ p ( background-color: #FEF0B6; padding: 5px; )Amely a következőket eredményezi:
Furcsaságok
A WebKitnek volt egy olyan furfangja, ahol ezeket nem használhatta álszelektorokkal. Tetszik:
input:checked ~ div ( /* Wouldn't work */ )Nem tudom a böngészők pontos verzióit, ahol ezt kijavították, de most már javítottak.
Több információ
- Gyermek- és testvérválasztók
- Hasonló a szomszédos testvérkombinátorhoz.
- MDN Docs
Böngésző támogatás
| Króm | Szafari | Firefox | Opera | AZAZ | Android | iOS |
|---|---|---|---|---|---|---|
| Bármi | 3+ | 1+ | 9+ | 7+ | Bármi | Bármi |