Selektor Kombinasi

Kenapa butuh kombinator?

Bayangkan kamu mau men-style link yang ada di dalam navbar saja, bukan semua link di halaman. Menambah class baru bisa, tapi kadang struktur HTML-nya sudah cukup jelas. Kombinator adalah simbol yang menjelaskan hubungan antar elemen.

Keturunan (spasi)

nav a {
  color: white;
}

Targetnya: semua <a> yang berada di dalam <nav>, sedalam apa pun. Ini kombinator paling sering dipakai.

Anak langsung (>)

ul > li {
  list-style: none;
}

Targetnya: <li> yang merupakan anak langsung dari <ul>. Kalau ada <li> bersarang di dalam <li> lain, yang bersarang tidak kena. Lebih ketat dari keturunan.

Saudara: + dan ~

Adjacent sibling + menargetkan saudara yang tepat setelahnya:

h2 + p {
  margin-top: 0;
}

Paragraf yang langsung muncul setelah h2 tidak punya margin atas. Berguna buat ritme teks artikel.

General sibling ~ menargetkan semua saudara setelahnya:

h2 ~ p {
  color: #444;
}

Semua paragraf setelah h2 (dalam induk yang sama) kena, tidak harus menempel langsung.

Catatan teknis: kombinator dibaca dari kanan ke kiri oleh browser. nav ul li a berarti browser mencari semua a, lalu memfilter yang punya leluhur li > ul > nav. Selektor yang terlalu panjang dan spesifik itu lambat dan susah di-override. Maksimal 3 level biasanya cukup.

Kenapa tidak tambah class saja?

Kadang kamu tidak mengontrol HTML-nya: konten dari CMS, markdown yang di-render, atau komponen library. Kombinator memungkinkan styling berdasarkan struktur yang sudah ada tanpa menyentuh HTML. Bahkan saat kamu mengontrol HTML, kombinator menghemat class yang hanya bermakna "di dalam X".

Contoh bertahap: menu navigasi

Level 1, semua link di nav berwarna putih:

nav a {
  color: white;
}

Level 2, tapi link di dropdown harus abu-abu. Dengan kombinator anak langsung, dropdown (yang bersarang) tidak ikut kena:

<nav>
  <a href="#">Beranda</a>
  <div class="dropdown">
    <a href="#">Submenu</a>
  </div>
</nav>

/* hanya <a> anak LANGSUNG nav */
nav > a {
  color: white;
  font-weight: bold;
}

/* link di dalam dropdown */
nav .dropdown a {
  color: #cbd5e1;
  font-weight: normal;
}

Level 3, ritme artikel: judul diikuti paragraf tanpa jarak berlebih.

h2 + p {
  margin-top: 4px;
}

h2 ~ p {
  max-width: 65ch;
}

Kesalahan umum pemula

Salah: spasi vs > tertukar. nav a (semua keturunan) vs nav > a (anak langsung). Untuk menu bertingkat, salah pilih berarti submenu ikut ke-style seperti menu utama.

Salah: + mengira "saudara mana saja". h2 + p HANYA paragraf yang tepat setelah h2. Kalau ada <img> di antaranya, tidak kena. Butuh "semua setelah"? Pakai ~.

Salah: rantai terlalu panjang dan rapuh.

/* SALAH: rapuh, rusak saat struktur HTML berubah sedikit */
body > div.wrapper > main > section.artikel > p.teks { }

/* BENAR: cukup spesifik, tahan perubahan */
.artikel .teks { }

Aturan praktis: maksimal 2-3 level. Lebih dari itu, tambahkan class.

Latihan kilat

1. Tulis selektor untuk: (a) semua link di dalam <footer>, (b) hanya list item anak langsung dari <ul class="menu">, (c) paragraf yang tepat setelah <h2>.
2. HTML bersarang: <div class="kartu"><p>Teks <span>kecil</span></p></div>. Selektor apa yang hanya menarget span (bukan p)?
3. Kenapa .a .b .c .d .e { } dianggap buruk? Tulis versi yang lebih baik.

Kunci: (1a) footer a, (1b) ul.menu > li, (1c) h2 + p. (2) .kartu span atau .kartu p span. (3) Rapuh dan susah dibaca; cukup .e dengan class yang bermakna, atau maksimal 2-3 level.

Istilah kunci

• Kombinator: simbol hubungan antar elemen (spasi, >, +, ~).
• Keturunan: elemen di dalam elemen lain, sedalam apa pun.
• Anak langsung: elemen tepat satu level di bawah induknya.
• Sibling: elemen yang berbagi induk yang sama.
• Adjacent sibling: saudara yang tepat bersebelahan (+).

Rangkuman

Spasi untuk keturunan, > untuk anak langsung, + untuk saudara tepat setelah, ~ untuk semua saudara setelah. Pakai secukupnya dan jangan bikin rantai selektor terlalu panjang.