Mengenal CSS Combinators dan Cara Menggunakannya

CSS Combinators adalah sesuatu yang menjelaskan hubungan antara selector. Selector CSS dapat berisi lebih dari satu selector sederhana. Di antara selector sederhana, kita dapat menyertakan combinator. Ada empat jenis combinator dalam CSS: descendant selector (spasi), child selector (>), adjacent sibling selector (+), dan general sibling selector (~).

Descendant Selector

Descendant selector (spasi) menggabungkan dua selector sehingga elemen yang cocok dengan selector kedua dipilih jika mereka memiliki elemen leluhur (parent, parent dari parent, parent dari parent dari parent, dll.) yang cocok dengan selector pertama. Selector yang menggunakan descendant combinator disebut descendant selector.

Contoh berikut memilih semua elemen <p> di dalam elemen <div>:

Child Selector

Child selector (>) ditempatkan di antara dua selector CSS. Ini hanya memilih elemen yang cocok dengan selector kedua yang merupakan anak langsung dari elemen yang cocok dengan selector pertama. Elemen keturunan yang lebih jauh di dalam hierarki tidak cocok. Misalnya, untuk memilih hanya elemen <p> yang merupakan anak langsung dari elemen <article>:

Adjacent Sibling Selector

Adjacent sibling selector (+) digunakan untuk memilih elemen yang berada tepat setelah elemen tertentu lainnya. Elemen saudara harus memiliki elemen induk yang sama, dan “bersebelahan” berarti “langsung mengikuti”. Contoh berikut memilih elemen <p> pertama yang ditempatkan langsung setelah elemen <div>:

General Sibling Selector

General sibling selector (~) memilih semua elemen yang merupakan saudara selanjutnya dari elemen tertentu. Contoh berikut memilih semua elemen <p> yang merupakan saudara selanjutnya dari elemen <div>:

Kegunaan CSS Combinators

CSS Combinators dapat digunakan untuk membuat seleksi lebih spesifik dan fleksibel. Dengan menggunakan combinator, kita dapat menargetkan elemen berdasarkan posisi dan hubungan mereka dalam dokumen HTML. Ini dapat membantu kita menghemat kode dan menghindari penggunaan kelas atau id yang berlebihan.

Beberapa contoh kegunaan CSS Combinators adalah sebagai berikut:

• Untuk menambahkan gaya khusus pada paragraf pertama atau terakhir dalam sebuah artikel.
• Untuk menampilkan atau menyembunyikan konten tambahan ketika pengguna mengklik atau mengarahkan kursor ke suatu elemen.
• Untuk membuat efek hover atau animasi pada elemen saudara.
• Untuk menyesuaikan tampilan tabel, daftar, atau formulir dengan memilih baris atau kolom tertentu.

Kesimpulan

CSS Combinators adalah cara untuk menggabungkan dua atau lebih selector sehingga mereka memiliki hubungan tertentu satu sama lain. Ada empat jenis combinator dalam CSS: descendant selector (spasi), child selector (>), adjacent sibling selector (+), dan general sibling selector (~). Dengan menggunakan combinator, kita dapat membuat seleksi lebih spesifik dan fleksibel sesuai dengan kebutuhan kita.