Combinator adalah simbol di antara dua selector yang memilih elemen lewat hubungannya dengan elemen lain: ada di dalamnya, anak langsungnya, atau tepat sesudahnya. Elemen yang ditulis di dalam elemen lain disebut anak, pembungkusnya disebut induk, anak dari anak disebut cucu, dan elemen dengan induk yang sama disebut saudara.
🧪 Tebakan cepat:
<p>ada di dalam<section>, dan<section>ada di dalam<div>. Apakahdiv > pmengenai<p>itu? Tebak dulu, jawabannya ada di bagian "Spasi dan>: di dalam elemen lain".
Spasi dan >: di dalam elemen lain
<h2>Judul</h2>
<p>Paragraf 1</p>
<p>Paragraf 2</p>
<article>
<p>Paragraf anak</p>
<div>
<p>Paragraf cucu</p>
</div>
</article>
<style>
article > p {
color: red;
}
</style>
articledanpadalah dua selector biasa, nama tag.>di antaranya adalah child combinator: pilih<p>yang induk langsungnya<article>.{ color: red; }berisi deklarasinya: properticolor(warna teks), titik dua, nilaired, titik koma.
Hasilnya, cuma "Paragraf anak" yang merah. "Paragraf cucu" gak kena, karena induk langsungnya <div>, bukan <article>.
Ganti > dengan spasi, article p, dan dua-duanya merah. Spasi adalah descendant combinator: pilih semua <p> di dalam <article>, sedalam apa pun.
Combinator juga jalan dengan class: .container > p memilih <p> yang anak langsung elemen ber-class="container". Jawaban tebakan: gak kena, karena induk langsung <p> itu <section>. Yang kena div p.
+ dan ~: saudara sesudahnya
h2 + p(adjacent sibling) memilih satu<p>yang ditulis tepat sesudah<h2>. Di contoh atas, cuma "Paragraf 1".h2 ~ p(general sibling) memilih semua<p>sesudah<h2>yang induknya sama: "Paragraf 1" dan "Paragraf 2". Paragraf di dalam<article>gak kena, induknya beda.
Contoh: h2 + p { margin-top: 0; }. Properti margin-top mengatur jarak kosong di atas elemen. <p> punya jarak atas bawaan, dan nilai 0 (sama dengan 0px) menghapusnya, jadi paragraf pertama nempel ke judulnya.
Spasi di sekitar >, +, dan ~ boleh ada atau gak: h2+p sama dengan h2 + p.
⚠️ Jebakan yang sering ketemu
- Spasi yang mengubah arti.
.kartu .judul(pakai spasi) memilih.juduldi dalam.kartu..kartu.judul(tanpa spasi) memilih satu elemen yang punya dua class itu sekaligus. - Mengira
+memilih semua.+cuma satu saudara tepat sesudahnya. Buat semuanya, pakai~. - Ada elemen lain nyelip. Kalau ada
<div>di antara<h2>dan<p>,h2 + pgak kena apa-apa.h2 ~ ptetap kena. - Mencari saudara sebelumnya.
+dan~cuma melihat ke depan. Gak ada combinator buat elemen yang ditulis sebelumnya.
TL;DR: Combinator menyambung dua selector lewat hubungannya. Spasi (A B): semua B di dalam A, sedalam apa pun. > (A > B): B yang anak langsung A. + (A + B): satu B tepat sesudah A. ~ (A ~ B): semua B sesudah A dengan induk yang sama.
