CSS Combinators

Sebuah selector CSS dapat berisi lebih dari satu pemilih sederhana. Antara pemilih sederhana, kita dapat mencakup combinator a. Ada empat combinators berbeda dalam CSS3: pemilih keturunan pemilih anak pemilih saudara yang berdekatan pemilih saudara umum

Descendant Selector

Pemilih keturunan cocok dengan semua elemen yang adalah keturunan dari elemen tertentu. Contoh berikut memilih semua <p> unsur dalam <div> elemen:

div p {
    background-color: yellow;
}

Child Selector

Pemilih anak memilih semua elemen yang adalah anak-anak langsung dari elemen tertentu. Contoh berikut memilih semua <p> elemen yang adalah anak-anak langsung dari elemen <div>:

div > p {
    background-color: yellow;
}

Adjacent Sibling Selector

Pemilih saudara yang berdekatan memilih semua elemen yang merupakan saudara kandung berdekatan elemen tertentu. Elemen saudara harus memiliki unsur induk yang sama, dan "berdekatan" berarti "segera setelah". Contoh berikut memilih semua <p> elemen yang ditempatkan segera setelah <div> elemen:

div + p {
    background-color: yellow;
}

General Sibling Selector

Pemilih saudara umum memilih semua elemen yang saudara dari elemen tertentu. Contoh berikut memilih semua <p> elemen yang saudara dari <div> elemen:

div ~ p {
    background-color: yellow;
}