Pada sesi kali ini saya akan melanjutkan penjelasan tentang macam-macam combinator di css mengenai combinator bersaudara (~) atau (+) yang sebelumnya sudah saya bahas tentang combinator turunan (spasi) dan combinators anak (>) pada sesi sebelumnya.

  1. Combinator bersaudara (~) atau (+)
    Combinator tersebut ada 2 jenis, combinator saudara umum dan combinator  saudara berdekatan. Keduanya dapat menangani element yang ada pada tingkat yang sama.

Berikut masing-masing penjelasan untuk combinator tersebut:

3.1 Combinator saudara umum atau (~)
Pada combinator tersebut berfungsi untuk mencocok kan atau memilih dengan semua element tertentu yang berada di bawah nya, dan menggunakan operator ~ sebagai pemisahnya..
Seperti contoh saya memiliki struktur HTML seperti berikut:

Jika dilihat dari struktur html di atas, dan sebagai contoh kasus nya saya ingin menyeleksi seluruh elemen <p> yang berada di bawah element <article> dengan memberikan property warna merah. Berikut kodenya:

Dan hasilnya output nya seperti berikut:

macam-macam-combinator-di-css
3.2. Combinator saudara berdekatan atau (+)
Pada combinator tersebut berfungsi untuk mencocokkan nya dengan elemen tertentu yang berdekatan atau berada langsung di bawah nya, dan menggunakan operator + sebagai pemisahnya.
Seperti contoh saya memiliki struktur HTML seperti berikut:

Jika dilihat dari struktur html di atas, dan sebagai contoh kasus nya saya ingin menyeleksi elemen <p> yang berada langsung setelah elemen <article> dengan memberikan property css warna merah. Berikut kodenya:

Dan hasilnya output nya seperti berikut:

macam-macam-combinator-di-css

Demikian penjelasan saya mengenai macam-macam combinator di css, semoga bermanfaat.