Pada kesempatan kali ini saya akan menjelaskan macam-macam combinator di css. Combinator di css dimana dapat digunakan untuk memilih inisial element yang di gunakan secara bersamaan di dalam element lain. Untuk menggunakan nya dapat di aplikasikan dengan operator khusus di dalam selektor element css tersebut.

Berikut di bawah ini macam-macam combinator berdasarkan fungsi nya masing-masing :

1. Combinator turunan (spasi)
Sebuah combinator keturunan menargetkan setiap element yang bersarang di dalam element lain. Bersarang dengan banyak tingkatan sedalam mungkin seperti anak, cucu dan seterusnya. Setiap pemilih dalam rantai dipisahkan oleh spasi tunggal.
Seperti contoh saya memiliki struktur HTML seperti berikut:

Jika di lihat dari struktur tersebut, sebagai contoh kasus saya ingin menerapkan property css dari setiap h2 yang ada, maka dapat saya gunakan dengan combinator turunan seperti berikut:

Dan hasilnya output nya seperti berikut:
macam-macam-combinator-di-css

2. combinators anak (>)
Sebuah combinator anak menargetkan keturunan langsung dari elemen induk dengan menggunakan operator > (lebih besar dari pada) dan untuk memilih element baik tag, id atau class yang ada di dalam nya. Element induk yang menjadi pembungkus nya harus selalu berada di sebelah kiri sebelum operator tersebut.
Seperti contoh saya memiliki struktur HTML seperti berikut:

Jika di lihat dari struktur tersebut, sebagai contoh kasus saya hanya ingin memberikan property css pada tag h2 yang hanya ada di dalam pembungkus article. Maka Dapat di aplikasikan dengan operator > seperti contoh di bawah ini:

Dan hasilnya output nya seperti berikut:
macam-macam-combinator-di-css

Untuk penjelasan tentang macam-macam combinator di css part-1 mengenai Combinator bersaudara (~) atau (+) dan yang lainnya, akan saya bahas pada sesi berikutnya. Semoga Bermanfaat.