Combinators

CSS combinators
«Sebelumnya
Next Chapter »
CSS combinators
Catatan Seorang combinator adalah sesuatu yang menjelaskan hubungan antara pemilih.

Sebuah selector CSS dapat berisi lebih dari satu pemilih sederhana. Antara pemilih sederhana, kita bisa memasukkan combinator a.

Ada empat combinators berbeda dalam CSS3:

     pemilih keturunan
     pemilih anak
     pemilih saudara yang berdekatan
     pemilih saudara umum

Pemilih keturunan

Pemilih keturunan cocok dengan semua elemen yang adalah keturunan dari elemen tertentu.

Contoh berikut memilih semua <p> unsur dalam <div> elemen:
contoh
div p {
     background-color: yellow;
}

Cobalah sendiri »

anak Pemilih

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>:
contoh
div> p {
     background-color: yellow;
}

Cobalah sendiri »

Berdekatan Sibling Pemilih

Pemilih saudara yang berdekatan memilih semua elemen yang merupakan saudara kandung yang 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:
contoh
div + p {
     background-color: yellow;
}

Cobalah sendiri »

General Sibling Pemilih

Pemilih saudara umum memilih semua elemen yang adalah saudara kandung dari elemen tertentu.

Contoh berikut memilih semua <p> elemen yang saudara dari <div> elemen:
contoh
div ~ p {
     background-color: yellow;
}