Kombinator CSS

Kombinator CSS

Kombinator adalah mekanisme yang menjelaskan hubungan antara pemilih.

Pemilih CSS dapat mengandung beberapa pemilih sederhana. Antara pemilih sederhana, kita dapat menambahkan kombinator.

Ada empat jenis kombinator yang berbeda dalam CSS:

  • Pemilih kambing anak (spasi)
  • Pemilih anak (>)
  • Pemilih saudara dekat (+)
  • Pemilih saudara umum (~)

Pemilih kambing anak

Pemilih kambing anak cocok dengan semua elemen kambing anak dari elemen yang ditentukan.

Contoh di bawah ini memilih semua elemen <p> di dalam elemen <div>:

Contoh

div p {
  background-color: yellow;
}

Coba sendiri

Pemilih anak

Pemilih anak cocok dengan semua elemen anak dari elemen yang ditentukan.

Contoh di bawah ini memilih semua elemen <p> yang termasuk anak dari elemen <div>:

Contoh

div > p {
  background-color: yellow;
}

Coba sendiri

Pemilih saudara dekat

Pemilih saudara dekat cocok dengan semua elemen saudara yang mendahului elemen yang ditentukan.

Elemen saudara (tingkatan yang sama) harus memiliki orang tua yang sama, 'dekat' berarti 'menjelangnya'.

Contoh di bawah ini memilih semua elemen <p> yang mengikuti elemen <div>:

Contoh

div + p {
  background-color: yellow;
}

Coba sendiri

Pemilih saudara umum

Pemilih saudara umum cocok dengan semua elemen yang termasuk saudara tingkatan dengan elemen yang ditentukan.

Contoh di bawah ini memilih semua elemen <p> yang termasuk elemen yang sama tingkatan dengan <div>:

Contoh

div ~ p {
  background-color: yellow;
}

Coba sendiri

Semua pemilih kombinasi CSS

Pemilih Contoh Penggambangan Contoh
element element div p Pilih semua elemen <p> di dalam elemen <div>.
element>element div > p Pilih setiap element <p> yang berasal dari element <div>.
element+element div + p Pilih setiap element <p> yang berikutan element <div>.
element1~element2 p ~ ul Pilih setiap element <ul> yang memiliki element <p> di hadapan.

Bacaan Lanjut

Buku Tambahan:Pemilih Anak-Anak CSS

Buku Tambahan:Pemilih Anak Element CSS

Buku Tambahan:Pemilih Saudara Kepada Kiri CSS