tutorial pengembangan web terbaru
 

CSS combinators

❮ Sebelumnya Berikutnya Bab ❯

CSS combinators

Catatan Sebuah combinator adalah sesuatu yang menjelaskan hubungan antara pemilih.

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

Ada empat combinators berbeda dalam CSS3:

  • pemilih keturunan (space)
  • pemilih anak (>)
  • berdekatan saudara pemilih (+)
  • pemilih saudara umum (~)

Pemilih keturunan

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

Contoh berikut memilih semua <p> elemen di dalam <div> elemen:

Contoh

div p {
    background-color: yellow;
}
Cobalah sendiri "

anak 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 <div> elemen:

Contoh

div > p {
    background-color: yellow;
}
Cobalah sendiri "

Berdekatan Sibling Selector

Pemilih saudara yang berdekatan memilih semua elemen yang merupakan saudara kandung yang berdekatan dari elemen tertentu.

elemen saudara harus memiliki unsur yang sama orangtua, 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 Selector

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

Contoh berikut memilih semua <p> elemen yang saudara dari <div> elemen:

Contoh

div ~ p {
    background-color: yellow;
}
Cobalah sendiri "

Uji Diri dengan Latihan!

Latihan 1 » Latihan 2» Latihan 3 » Latihan 4»


❮ Sebelumnya Berikutnya Bab ❯