Latest web development tutorials

Kombinasi CSS

Kombinasi CSS

catatan penyeleksi kombinasi menggambarkan hubungan langsung antara dua penyeleksi.

CSS mencakup kombinasi dari berbagai kombinasi penyeleksi sederhana.

Dalam CSS3 mengandung empat kombinasi:

  • pemilih keturunan (dipisahkan oleh spasi)
  • elemen anak pemilih (lebih besar dari delimited)
  • Berdekatan saudara pemilih (ditambah delimited)
  • Biasa Saudara pemilih (dipisahkan dengan tanda hubung)

Offspring Picker

pemilih keturunan cocok dengan semua elemen elemen keturunan layak.

Contoh berikut memilih semua <p> elemen ke elemen <div>:

contoh

div p
{
background-color:yellow;
}

Coba »

penyeleksi anak

Dibandingkan dengan pemilih keturunan, sub-penyeleksi (penyeleksi anak) dapat memilih elemen sebagai elemen anak dari elemen.

Contoh-contoh berikut dipilih <div> elemen dalam semua elemen anak langsung <p>:

contoh

div>p
{
background-color:yellow;
}

Coba »

Berdekatan Sibling Selector

Berdekatan saudara pemilih (yang berdekatan pemilih saudara) memilih elemen lain segera setelah elemen, dan keduanya memiliki elemen induk yang sama.

Jika Anda harus memilih elemen lain segera setelah elemen, dan keduanya memiliki elemen induk yang sama, Anda dapat menggunakan saudara pemilih yang berdekatan (Adjacent saudara pemilih).

Contoh berikut memilih semua yang pertama dalam elemen <div> setelah <p> elemen:

contoh

div+p
{
background-color:yellow;
}

Coba »

Biasa pemilih saudara yang berdekatan

Umum pemilih saudara yang berdekatan untuk memilih semua elemen saudara yang ditentukan.

Contoh berikut memilih semua <div> unsur semua saudara yang berdekatan <p>:

contoh

div~p
{
background-color:yellow;
}

Coba »