COMBINATORS

Combinator dalam CSS membantu kita dalam menyeleksi elemen-elemen pada halaman web dengan lebih spesifik. Dengan menggunakan kombinator, kita dapat menarget elemen berdasarkan hubungan antara satu elemen dengan elemen lainnya.

Ada empat jenis kombinator dalam CSS, yaitu descendant combinator, child combinator, adjacent sibling combinator, dan general sibling combinator.

Descendant Combinator

Descendant Combinator diwakilkan dengan spasi. Ia digunakan untuk menyeleksi elemen yang merupakan turunan dari elemen lain.

Contoh penggunaannya:

div p {
    color: blue;
}

Pada kode di atas, semua elemen <p> yang merupakan turunan dari <div> akan berubah warna teksnya menjadi biru.

Child Combinator

Child Combinator ditandai dengan tanda >. Ia digunakan untuk menyeleksi elemen yang merupakan anak langsung dari elemen lain.

Contoh penggunaannya:

div > p {
    color: red;
}

Pada kode di atas, hanya elemen <p> yang merupakan anak langsung dari <div> yang akan berubah warna teksnya menjadi merah.

Adjacent Sibling Combinator

Adjacent Sibling Combinator ditandai dengan tanda +. Ia digunakan untuk menyeleksi elemen yang bersebelahan dan memiliki parent yang sama.

Contoh penggunaannya:

div + p {
    color: green;
}

Pada kode di atas, elemen <p> yang bersebelahan langsung setelah <div> akan berwarna hijau.

General Sibling Combinator

General Sibling Combinator ditandai dengan tanda ~. Ia digunakan untuk menyeleksi semua elemen yang bersebelahan dan memiliki parent yang sama.

Contoh penggunaannya:

div ~ p {
    color: purple;
}

Pada kode di atas, elemen <p> yang bersebelahan (tidak harus langsung setelah) <div> akan berwarna ungu.

Ingatlah, ketika menggunakan combinator, urutan elemen sangat penting. Elemen di sebelah kiri dari combinator adalah “elemen subjek”, sementara elemen di sebelah kanan adalah elemen yang kita coba seleksi berdasarkan hubungannya dengan subjek. Selamat mencoba!