Combinator CSS

Sebuah combinator adalah sesuatu yang menjelaskan hubungan antara penyeleksi.

Sebuah selector CSS dapat berisi lebih dari satu selector yang sederhana. Di antara selector yang sederhana, kita dapat menyertakan combinator.

Ada empat kombinator berbeda dalam CSS:

• selector turunan (spasi)
• selector anak (>)
• selector saudara yang berdekatan (+)
• selector saudara umum (~)

Selector Turunan

Selector turunan cocok dengan semua elemen yang merupakan turunan dari elemen tertentu.

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

div p {
  background-color: yellow;
}

Selector Anak (>)

Selector anak memilih semua elemen yang merupakan anak dari elemen tertentu.

Contoh berikut memilih semua elemen <p> yang merupakan anak dari elemen <div>:

div > p {
  background-color: yellow;
}

Selector Saudara Berdekatan (+)

Selector saudara yang berdekatan digunakan untuk memilih elemen yang secara langsung setelah elemen tertentu lainnya.

Elemen saudara harus memiliki elemen induk yang sama, dan "berdekatan" berarti "segera mengikuti".

Contoh berikut memilih elemen <p> pertama yang ditempatkan tepat setelah elemen <div>:

div + p {
  background-color: yellow;
}

Selector Saudara Umum (~)

Selector saudara kandung umum memilih semua elemen yang merupakan saudara kandung berikutnya dari elemen tertentu.

Contoh berikut memilih semua elemen <p> yang merupakan saudara kandung berikutnya dari elemen <div>: 

div ~ p {
  background-color: yellow;
}

Sumber referensi: w3schools