Penggabung CSS
Penggabung CSS
Sebuah kombinator adalah sesuatu yang menjelaskan hubungan antara penyeleksi.
Sebuah pemilih CSS dapat berisi lebih dari satu pemilih sederhana. Di antara pemilih sederhana, kita dapat menyertakan kombinator.
Ada empat kombinator berbeda di CSS:
- pemilih turunan (spasi)
- pemilih anak (>)
- pemilih saudara yang berdekatan (+)
- pemilih saudara umum (~)
Pemilih Keturunan
Pemilih turunan cocok dengan semua elemen yang merupakan turunan dari elemen tertentu.
Contoh berikut memilih semua elemen <p> di dalam elemen <div>:
Contoh
div p {
background-color: yellow;
}
Pemilih Anak (>)
Selektor anak memilih semua elemen yang merupakan anak dari elemen tertentu.
Contoh berikut memilih semua elemen <p> yang merupakan anak dari elemen <div>:
Contoh
div > p {
background-color: yellow;
}
Pemilih Saudara Berdekatan (+)
Selektor 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 segera setelah elemen <div>:
Contoh
div + p {
background-color: yellow;
}
Pemilih Saudara Umum (~)
Selektor saudara 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>:
Contoh
div ~ p {
background-color: yellow;
}
Semua Pemilih Kombinasi CSS
Selector | Example | Example description |
---|---|---|
element element | div p | Selects all <p> elements inside <div> elements |
element>element | div > p | Selects all <p> elements where the parent is a <div> element |
element+element | div + p | Selects the first <p> element that are placed immediately after <div> elements |
element1~element2 | p ~ ul | Selects every <ul> element that are preceded by a <p> element |