Belajar CSS Bagian 6 :CSS Combinator: Cara Menggabungkan Selector di CSS

Saat membuat tampilan web dengan CSS, kita jarang hanya menargetkan satu elemen saja. Yang sering kita butuhkan justru:

• elemen yang berada di dalam elemen lain

• elemen yang merupakan anak langsung

  Baca juga:
  • Belajar Coding Bagian 1: Pengenalan Peran HTML dalam Website
  • Belajar CSS Bagian 4 : Mengenal Box Model pada CSS (Margin, Border, Padding dan Content)
  

• elemen yang saudara setelah elemen tertentu

• elemen yang masih satu “keluarga struktur”

Untuk itulah CSS menyediakan fitur bernama CSS Combinator.

---

Apa Itu CSS Combinator?

CSS Combinator adalah cara menggabungkan dua selector atau lebih untuk menjelaskan hubungan antar elemen HTML.

Selector yang digabung bisa berupa:

• Tag HTML (ul, li, p, button)

• Class (.menu, .content)

• ID (#nav)

Combinator menentukan bagaimana hubungan elemen-elemen tersebut, bukan sekadar namanya.

---

Konsep Dasar: Struktur & “Satu Keluarga”

Sebelum masuk ke jenis combinator, pahami prinsip ini:

CSS Combinator hanya bekerja pada elemen yang masih berada dalam satu struktur (parent yang sama).

Artinya:

• ❌ bukan elemen di atasnya

• ❌ bukan elemen di luar section

• ❌ bukan elemen beda container

• ✅ masih satu parent (satu keluarga)

Ibarat keluarga:

• Parent → orang tua

• Child → anak langsung

• Sibling → saudara kandung

---

Jenis-Jenis CSS Combinator

Ada 4 combinator utama dalam CSS:

1. Descendant Combinator (spasi)

2. Child Combinator (>)

3. Adjacent Sibling Combinator (+)

4. General Sibling Combinator (~)

Kita bahas satu per satu dengan contoh nyata.

---

1. Descendant Combinator (Spasi)

Ini adalah combinator paling sering digunakan.

Contoh CSS

ul li {
  color: red;
}
Artinya

• Pilih SEMUA <li> yang berada di dalam <ul>

• Tidak peduli sedalam apa posisinya

Contoh HTML

<ul>
  <li>Item 1</li>
  <li>
    Item 2
    <ul>
      <li>Sub Item</li>
    </ul>
  </li>
</ul> 

➡️ Semua <li> akan berubah warna.

📌 Descendant = semua keturunan

---

2. Child Combinator (>)

Child combinator lebih ketat dan spesifik.

Contoh CSS

ul > li {
  color: blue;
}
Artinya

• Hanya <li> yang merupakan anak langsung <ul>

• <li> di dalam <ul> lain tidak ikut

📌 Child = anak langsung saja

Ini penting saat kita:

• ingin styling rapi

• tidak ingin elemen “dalam-dalam” ikut kena

---

Perbedaan Descendant vs Child

Descendant ( )	Child (>)
Semua turunan	Anak langsung
Lebih luas	Lebih spesifik
Mudah kebablasan	Lebih aman

---

3. Adjacent Sibling Combinator (+)

Combinator ini bekerja dengan konsep saudara terdekat.

Konsep Penting

Elemen pertama hanya sebagai PATOKAN, bukan yang diubah.

Contoh HTML

<p>Paragraf 1</p> 
<p>Paragraf 2</p> 
<p>Paragraf 3</p> 

Contoh CSS

p + p {
  margin-top: 32px;
}
Apa yang Terjadi?

• Paragraf 2 → berubah (saudara terdekat P1)

• Paragraf 3 → berubah (saudara terdekat P2)

• Paragraf 1 → TIDAK berubah

📌 Paragraf pertama hanya digunakan untuk mencari, bukan untuk diubah.

---

4. General Sibling Combinator (~)

Jika + hanya satu saudara terdekat, maka ~ berarti:

Semua saudara setelah elemen patokan

Contoh CSS

p ~ p {
  color: gray;
}
Hasil

• Paragraf 2 & 3 berubah

• Paragraf 1 tetap

📌 Digunakan saat:

• ingin memberi efek ke banyak elemen setelahnya

• layout berbasis urutan

---

Studi Kasus Nyata: Kenapa P2 & P3 Berubah?

<p>P1</p>
<p>P2</p>
<p>P3</p>
<p>P4</p>

p + p {
  color: orange;
}
Logika CSS-nya:

• P1 → patokan

• P2 → saudara terdekat P1 ✔

• P3 → saudara terdekat P2 ✔

• P4 → saudara terdekat P3 ✔

➡️ Yang berubah: P2, P3, P4
➡️ P1 tidak pernah berubah

---

Contoh Kasus Navigasi (nav & link)

HTML

<nav>
  <a href="#">Home</a>
  <a href="#">About</a>
</nav>

<a href="#">Login</a>

CSS

nav > a {
  color: yellow;
  margin-right: 12px;
}
Hasil

• Link di dalam <nav> berubah

• Link di luar tidak ikut

📌 Inilah alasan kenapa combinator lebih kuat daripada styling global.

---

Kenapa Tidak Selalu Pakai Class?

Pertanyaan penting 👇

Kenapa kadang lebih baik pakai:

button + button { ... } 

daripada:

.button-secondary { ... } 

Alasannya:

• Combinator mengikuti struktur HTML

• Tidak perlu menambah class manual

• Sangat berguna saat:

  • belajar JavaScript

  • membuat state dinamis

  • UI berubah otomatis

💡 Class tetap penting, tapi combinator memberi logika struktur.

---

Combinator + Selector (Praktik Modern)

nav button + button {
  margin-left: 12px;
}
Artinya:

• Cari button

• Di dalam nav

• Yang berada setelah button lain

📌 Ini adalah pola yang sangat sering dipakai di UI modern.

---

Ringkasan CSS Combinator

Combinator	Simbol	Fungsi
Descendant	spasi	Semua keturunan
Child	>	Anak langsung
Adjacent Sibling	+	Saudara terdekat
General Sibling	~	Semua saudara setelah

---

Kesimpulan

CSS Combinator membantu kita:

• Mengontrol styling dengan presisi

• Mengurangi class berlebihan

• Memahami logika struktur HTML

CSS bukan soal warna & margin saja,
tapi soal hubungan antar elemen.

Kalau combinator sudah paham, layout kompleks jadi jauh lebih muda