Sibling Selector

Combinator yang sudah kita kenal menelusuri hubungan ke bawah, dari induk ke anak. Sering kali kebutuhannya justru mendatar: paragraf pertama setelah judul ingin tampil berbeda, label ingin menempel rapi di kanan checkbox, dan pesan feedback ingin mengikuti input yang baru diisi. Dua elemen yang berbagi induk yang sama disebut sibling, dan CSS menyediakan dua combinator untuk menjangkaunya: adjacent sibling (+) yang memilih tetangga persis di sebelah, serta general sibling (~) yang memilih semua saudara setelahnya. Chapter ini membedah keduanya, arah pencariannya, dan pola praktis yang paling sering dipakai.

Adjacent Sibling dengan Tanda Plus #

Selector h2 + p dibaca: “pilih p yang persis mengikuti sebuah h2, dalam induk yang sama”.

css
h2 + p {
  margin-top: 0;
  font-weight: 600;
}

Mekanismenya melibatkan dua pemeriksaan untuk setiap kandidat p: pertama, apakah elemen sebelum kandidat yang berdekatan adalah h2; kedua, apakah keduanya benar-benar berbagi induk. Kedua syarat wajib terpenuhi sekaligus. Kata “berdekatan” adalah kuncinya: bila ada elemen lain berselisih di antara keduanya, selector + tidak lagi cocok.

General Sibling dengan Tanda Tilde #

Selector h2 ~ p dibaca: “pilih semua p yang berada setelah sebuah h2, dalam induk yang sama”. Kali ini keberadaan elemen lain di antaranya tidak menghalangi:

css
h2 ~ p {
  color: #44546a;
}

Perhatikan markup berikut:

html
<article>
  <h2>Cara Seduh</h2>
  <p>Gunakan air bersuhu 90 derajat.</p>
  <blockquote>Kopi terbaik butuh kesabaran.</blockquote>
  <p>Bersihkan alat setiap kali selesai dipakai.</p>
</article>

Selector	Yang terpilih pada markup di atas
`h2 + p`	hanya “Gunakan air bersuhu 90 derajat.”
`h2 ~ p`	kedua paragraf, karena keduanya berada setelah `h2`

Demo berikut menerapkan kedua selector pada markup di atas sekaligus — perhatikan paragraf mana yang hanya kena satu dan mana yang kena dua:

Keduanya memakai syarat yang sama untuk posisi awal (satu induk, satu elemen acuan h2), tetapi berbeda jangkauan: + berhenti pada tetangga pertama, ~ meneruskan ke semua saudara berikutnya.

Arah Pencarian Selalu ke Depan #

Ada satu batasan yang wajib diingat: sibling combinator hanya melihat elemen yang datang setelahnya dalam urutan dokumen. Tidak ada combinator yang memilih “saudara sebelumnya”. Kesalahan pembacaan yang paling sering terjadi adalah menganggap p + h2 berarti “p yang berada sebelum h2” — padahal artinya justru “h2 yang mengikuti sebuah p”.

Pola Praktis yang Sering Dipakai #

Tiga pola berikut muncul hampir di setiap proyek:

h2 + p — memberi gaya khusus pada paragraf pengantar tepat di bawah judul.
.pilihan + label — menata label yang persis mengikuti checkbox atau radio, tanpa perlu class tambahan pada label.
.kolom-input + .pesan — mengatur pesan feedback yang selalu mengikuti input.

css
.pilihan + label {
  margin-left: 10px;
  font-weight: 500;
}

.kolom-input + .pesan {
  margin-left: 8px;
  font-size: 14px;
  color: #5a6b7b;
}

Demo berikut merangkai ketiga pola pada satu fragmen halaman pendaftaran:

Karena seleksinya bergantung pada posisi, markup tetap bersih: tidak ada class baru yang perlu ditempelkan hanya demi jarak. Satu-satunya alasan ketiga gaya itu bekerja adalah urutan markup: tukar posisi checkbox dan label, lalu keduanya langsung berhenti cocok.

Kesalahan Umum #

Kesalahan	Akibat	Perbaikan
Memakai `+` padahal yang diinginkan semua saudara berikutnya	Hanya elemen pertama yang bergaya	Ganti `+` dengan `~`
Mengira sibling combinator bisa melihat ke belakang	Gaya tidak muncul karena arah selector terbalik	Targetkan elemen yang berada sesudah elemen acuan
Menargetkan elemen yang tampak bersebelahan tetapi berada dalam container berbeda	Tidak cocok, karena syarat satu induk tidak terpenuhi	Pastikan kedua elemen benar-benar sibling, atau pilih selector lain

Ringkasan #

Adjacent sibling (+) memilih tetangga persis di sebelah, general sibling (~) memilih semua saudara setelahnya, dan keduanya hanya bekerja searah depan dalam induk yang sama. Dengan dua combinator ini, gaya dapat mengikuti urutan konten: paragraf pengantar, label checkbox, dan pesan feedback semuanya bisa diatur tanpa menambah class. Selanjutnya kita kembali ke pengelompokan target, kali ini lebih dalam: bagaimana browser mengevaluasi selector list dan bagaimana :is() serta :where() membuatnya lebih tahan kesalahan.