Kombinator CSS

Kombinator CSS

Kombinator adalah mekanisme yang menjelaskan hubungan antara pemilih.

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

Ada empat kombinator yang berbeda dalam CSS:

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

Pemilih kakek

Pemilih kakek cocok dengan semua elemen kakek yang termasuk 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 yang termasuk elemen yang ditentukan.

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

Contoh

div > p {
  background-color: yellow;
}

Coba sendiri

Pemilih saudara dekat

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

Elemen saudara (tingkat yang sama) harus memiliki induk yang sama, 'dekat' berarti 'diikuti'.

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 saudara tingkat yang sama yang termasuk elemen yang ditentukan.

Contoh di bawah ini memilih semua elemen <p> yang termasuk elemen tingkat yang sama dari elemen <div>.

Contoh

div ~ p {
  background-color: yellow;
}

Coba sendiri

Semua pemilih kombinasi CSS

Pemilih Contoh Deskripsi contoh
element element div p Pilih semua elemen <p> di dalam elemen <div>.
element>element div > p Pilih semua elemen <p> yang memiliki elemen ayah <div>.
element+element div + p Pilih semua elemen <p> yang mengikuti elemen <div>.
element1~element2 p ~ ul Pilih setiap <ul> elemen yang memiliki elemen <p> di depannya.

Bacaan Lanjutan

Buku Tambahan:Pemilih Anak Turun

Buku Tambahan:Pemilih Anak Element

Buku Tambahan:Pemilih Saudara Kiri