Kombinasi CSS

Kombinasi adalah sesuatu yang menjelaskan hubungan antara penyeleksi.Selektor CSS dapat berisi lebih dari satu pemilih sederhana. Antara penyeleksi sederhana, kita bisa memasukkan kombinator.Ada empat kombinasi yang berbeda dalam CSS3:

    Pemilih turunan (spasi)
    Pemilih anak (>)
    Pemilih saudara yang berdekatan (+)
    General sibling selector (~)

Descendant Selector /Pemilih Keturunan

Seleksi keturunan cocok dengan semua elemen yang merupakan keturunan dari elemen tertentu.Contoh berikut memilih semua elemen <p> di dalam elemen <div>: 
Contoh

div p {
    background-color: yellow;
}

Child Selector/ Pemilih anak

Seleksi anak memilih semua elemen yang menjadi anak langsung dari elemen tertentu.Contoh berikut memilih semua elemen <p> yang merupakan anak langsung dari elemen <div>:
 Contoh

div > p {
    background-color: yellow;
}

Adjacent Sibling Selector/Pemilih saudara yang berdekatan

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

div + p {
    background-color: yellow;
}

General Sibling Selector

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

div ~ p {
    background-color: yellow;
}

Share :

Tweet

✚

Related Post