Cara Menggunakan Combinators Selectors pada CSS
Pada tutorial sebelumnya kalian sudah mempelajari tentang Selector dan Cara Menggunakan Simple Selector untuk memformat tag HTML. Pada tutorial ini kalian akan belajar tentang penggunakan Combinator Selector pada CSS.
Apa yang dimaksud CSS Combinators Selectors?
CSS Combinators Selectors adalah jenis kode CSS yang menjelaskan hubungan antara dua selector atau sering disebut dengan relasi antara selector.
Ada 4 tipe kombinator yang dapat kita terapkan pada CSS yaitu :
- Selector descendant / turunan (spasi)
- Selector child (>)
- Selector adjacent siblings (+)
- General sibling selector (~)
Di bawah ini akan diuraikan satu per satu dari 4 tipe kombinator di atas.
1. Selector Descendant/Turunan
Selector turunan akan mencocokkan semua elemen yang merupakan turunan dari elemen yang telah ditentukan.
Misalnya adalah elemen <h3> yang merupakan turunan dari elemen <div> atau dapat disebut dengan <h3> di dalam <div>.
Perhatikan contoh kode CSS di bawah ini.
1 2 3 |
div h3{ color: red; } |
Kode CSS di atas digunakan untuk memformat elemen <h3> yang berada di dalam <div>. Seperti contoh kode HTML berikut ini.
1 2 3 4 5 |
<div> <h3>Belajar Combinator Selector CSS Bersama SolusiLain.Com</h3> </div> <h3>Uji coba H3 yang berada diluar DIV.</h3> |

Hasil Combinator Selector CSS
2. Selector Child (>)
Selector child (>) ini akan memilih semua element yang merupakan anakan dari elemen yang di tentukan.
Contohnya adalah elemen <p> yang merupakan turunan dari elemen <div>, seperti contoh kode HTML berikut ini:
1 2 3 4 5 |
<div> <h3>Belajar Combinator Selector CSS.</h3> <p>Belajar Selector Child CSS Bersama SolusiLain.Com.</p> <p>Belajar Pemrograman Web Bersama SolusiLain.Com.</p> </div> |
1 2 3 4 |
div > p{ text-align: center; color: red; } |

Hasil Selector Child
Dari contoh kode HTML dan CSS di atas terlihat 2 paragraf yang diformat dengan rata tengah dan warna merah.
3. Selector adjacent siblings (+)
Selector adjacent siblings akan memilih semua element yang “adjacent siblings” dari elemen yang di tentukan. Elemen sibling (saudara) ini harus memiliki satu level yang sama atau parent yang sama pada HTML, dan “adjacent” disini berarti element setelah elemen yang telah ditentukan (paling dekat). Contohnya jika akan memilih semua elemen <p> yang mana diletakan setelah elemen <div>. Meskipun Selector ini jarang digunakan namun perlu juga kita pamahi sehingga jika sewaktu-waktu membutuhkan kalian tinggal menggunakannya.
Contoh HTML:
1 2 3 4 5 6 7 8 9 10 11 |
<body> <div> <h3>Belajar Combinator Selector CSS.</h3> <p>Belajar Selector Child CSS Bersama SolusiLain.Com.</p> <p>Belajar Pemrograman Web Bersama SolusiLain.Com.</p> </div> <p>Hasil penerapan Selector adjacent siblings.</p> <p>Hasil penerapan Selector adjacent siblings.</p> </body> |
Kode CSS menggunakan Selector adjacent siblings:
1 2 3 4 |
div + p{ text-align: right; color: blue; } |
hasil dari penerapan Selector adjacent siblings adalah sebagai berikut:

Hasil Selector adjacent siblings CSS
Dari hadil latihan Selector adjacent siblings di atas, terlihat hanya elemen <p> pertama yang sejajar dengan <div> yang di format, sedang <p> di bawahnya tidak diformat sama sekali.
4. General Sibling Selector
General sibling selector akan memilih semua element yang bersaudara dari elemen yang di tentukan. Contohnya adalah akan memilih semua elemen <p> yang mana diletakan setelah elemen <div>.
Contoh penggunaannya kita tetap menggunakan HTML sebelumnya yang telah kita gunakan untuk latihan penggunaan Selector Adjacent Siblings. Namun dengan merubah di kode CSS nya menjadi seperti berikut ini:
1 2 3 4 |
div ~ p{ text-align: right; color: blue; } |
Maka hasilnya akan terlihat seperti gambar berikut ini.

Hasil Penerapan General Sibling Selector
Perbedaan andara Selector adjacent siblings dan General Sibling Selector adalah dampak yang diformat pada elemen HTML. Kalian bisa mengamati perbedaannya dari hasil latihan di atas.