Kombinator saudara umum (~) di CSS terlihat seperti ini digunakan:
.featured-image ~ p ( font-size: 90%; )Dalam contoh itu, Anda akan memilih semua paragraf dalam artikel yang muncul setelah gambar unggulan (elemen dengan nama kelas "gambar-unggulan") dan membuatnya sedikit lebih kecil font-size.
Ini memilih elemen pada tingkat hierarki yang sama. Dalam contoh ini .featured-imagedan pelemen berada pada hierarki yang sama. Jika pemilih terus melewati patau sebelumnya .featured-image, aturan normal berlaku. Jadi .featured-image ~ p spantetap akan memilih rentang yang merupakan keturunan dari .featured-image ~ ppertandingan apa pun .
Spesifikasi untuk penyeleksi level 4 menyebutnya "Penggabung Saudara Mengikuti".
Demo
Berikut contoh lain yang menyoroti semua pelemen yang mengikuti img:
img ~ p ( background-color: #FEF0B6; padding: 5px; )Yang akan menghasilkan sebagai berikut:
Quirks
WebKit dulu memiliki kekhasan di mana Anda tidak dapat menggunakannya dengan pemilih semu. Suka:
input:checked ~ div ( /* Wouldn't work */ )Saya tidak tahu versi pasti dari browser yang telah memperbaikinya, tetapi sekarang sudah diperbaiki.
Informasi Lebih Lanjut
- Penyeleksi Anak dan Saudara kandung
- Mirip dengan Combinator Saudara yang Berdekatan.
- Dokumen MDN
Dukungan Browser
| Chrome | Safari | Firefox | Opera | YAITU | Android | iOS |
|---|---|---|---|---|---|---|
| Apa saja | 3+ | 1+ | 9+ | 7+ | Apa saja | Apa saja |