CSS Combinator

Selector adalah nama element html yang akan di edit. Misal, jika elementnya <p> maka yang selector css adalah p {}.

Sampai sini clear ya?

Selector yang hanya p {} itu saja maka disebut dengan simple selector. Ya karena simple aja, cuma satu p.

Tingkatan yang lebih lanjut, maka kita bisa mengkombinasikan banyak selektor atau memilih selektor dengan berbagai kombinasi logika.

CSS combinator antara lain:

• Selektor descendant (spasi)
• Selektor child (>)
• Selektor adjacent sibling (+)
• Selektor general sibling (~)

Descendant Selector

Descendants artinya turunan, jadi descendant selector adalah css combinator untuk memilih element di dalam element.

Misal, ada element <div> <p> ini paragraf</p></div>. Untuk memilih setiap element <p> di d alam <div>, maka menggunakan deskendan selektor.

Selektornya menjadi:

div p {
 background:black;
}

Level turunannya tak terbatas, tapi biasanya sih maksimal 4-5 level aja. Misal, <div><p>ini teks <b>dibold</b></p></div>.

Maka selektor cssnya: div p b {} untuk memilih element <b> di dalam <p> di dalam <div>.

Bagaimana kalau ada id atau class?

Misal kodingnya: <div id="unik"><p> ini teks <i>miring</i></p></div>. Hanya memilih <i> di dalam <p>, dimana <p> di dalam <div> dengan id = unik.

Untuk menulis selektor id di css maka digunakan #, kalau class digunakan .. Jadi kasus diatas, combinatornya menjadi:

div#unik p i {
background:red
}

Child selector

Ini hampir sama dengan descendant selector, tapi tetap beda.

Child itu artinya anak. Kalau descendant itu keturunan. Arti secara harfiah ini harus bener-bener kamu pahami.

Kalau anak itu berarti ya langsung, misal aku anaknya bapak. Tapi, kalau keturunan bisa keturunan ke 7 atau 8. Sampai sini clear ya?

Jadi, kalau child selector memilih setiap element yang ada tepat di bawah suatu element.

Misal, <div><p>ini paragraf</p></div>. Maka, element <p> adalah child dari element <div>.

Tapi, misal <div><section><p> ini paragraf</p></section></div>, maka <p> ini descendant alias keturunan dari <div> bukan child dari <div>.

Jadi, untuk memilih hanya <p> child dari <div> maka digunakan selektor sintax:

div > p {
background:red;
 }

Adjacent Sibling Selector

Nah ini yang makin rumit lagi.

Intinya adjacent sibling adalah selektor yang memilih setiap element setelah suatu element.

Ditulis dengan tanda + misal div + p {}. Biar gak bingung, berikut contohnya:

<style>
div + p {
  background-color: #5340ff;
  color:yellow
}
</style>
<div>
  <p>Paragraph 1 di dalam div.</p>
  <p>Paragraph 2 masih di dalam div.</p>
</div>

<p>Paragraph 3 diluar div. Yang kena cuma ini</p>
<p>Paragraph 4 masih diluar div.</p>

Nanti hasilnya akan seperti ini:

Paragraf 4 tidak kena karena tidak tepat setelah <div>.

General Sibling Selector

Ini yang terakhir.

General sibling selektor adalah selektor yang memilih setiap element yang sama tapi terpisah oleh satu element.

Selektornya menggunakan ~, jadinya div ~ p {}.

<style>
div ~ p {
  background-color: yellow;
}
</style>
<p>Paragraf 1.</p>

<div>
  <p>Paragraf 2. Didalam div</p>
</div>

<p>Paragraf 3. Sebelum div</p>
<div>Ini div.</div>
<p>Paragraph 4. Setelah div</p>

Hasilnya adalah:

Mengapa cuma paragraf 3 dan 4 saja? Ya karena mereka berdekatan, hanya dipisahkan div saja.

Selector CSS Combinator

Berikut ini adalah tabel daftar semua selektor dari css combinator:

Selektor	Contoh	Keterangan
element element	p span	Pilih setiap <span> di dalam <p>
element+element	p + span	Pilih setiap <span> dimana <span> posisinya setelah <p>
element>element	p > span	Pilih setiap <span> dimana parentnya adalah <div>
element1~element2	div ~ p	Pilih setiap <p> yang dipisahkan oleh <div>