Tuesday, December 30, 2014

Tutorial CSS Part 19: Menggunakan Kombinasi Selector

Dalam menggunakan CSS, kita bisa menggunakan kombinasi beberapa selector yang digabung dengan sebuah combinator CSS. Combinator CSS ini menjelaskan bagaimana hubungan antara beberapa selector tersebut.

Ada empat kombinator CSS yang bisa dipakai, yaitu :
  1. descendant selector
  2. child selector
  3. adjacent sibling selector
  4. general sibling selector
Berikut ini penjelasan beberapa combinator tersebut :

1. descendant selector

Adalah kombinasi selector turunan. Artinya selector yang pertama merupakan elemen utama dan selector berikutnya merupakan elemen turunan yang berada dalam blok elemen utama. Jadi deklarasi CSS pada descendant selector berlaku untuk semua elemen turunan yang ada dalam blok elemen utama.

Untuk menggunakan kombinasi descendant selector kita gunakan operator dengan karakter spasi.

Contoh penggunaan descendant selector :

div p {
    background-color: yellow;
}
Untuk lebih jelas, kita bisa berlatih descendant selector disini >>.

2. child selector

Adalah kombinasi selector anak. Artinya selector yang pertama merupakan elemen induk dan selector berikutnya merupakan elemen anak dari elemen utama. Jadi semua deklarasi CSS pada child selector berlaku untuk semua elemen anak yang ada dalam blok elemen induk.

Perbedaan child selector dengan descendant selector adalah:
  • kombinasi child selector berlaku pada elemen yang berada secara langsung dibawah elemen induk dan tidak berlaku untuk elemen yang berada dibawah elemen lain walaupun masih didalam blok elemen induk.
  • kombinasi descendant selector berlaku untuk semua elemen turunan yang ada dalam elemen induk
Untuk menggunakan kombinasi child selector kita gunakan operator dengan karakter >.

Contoh penggunaan child selector :

div > p {
    background-color: yellow;
}
Untuk lebih jelas, kita bisa berlatih child selector disini >>.

3. adjacent sibling selector

Adalah kombinasi CSS untuk elemen yang berdekatan dan berada tepat setelah blok elemen pertama. Jadi elemen kedua tidak berada didalam elemen pertama.

Untuk menggunakan kombinasi adjacent sibling selector kita gunakan operator dengan karakter +.

Contoh penggunaan adjacent sibling selector :

div + p {
    background-color: yellow;
}
Untuk lebih jelas, kita bisa berlatih adjacent sibling selector disini >>.

4. general sibling selector

Adalah kombinasi CSS untuk elemen yang berdekatan. Deklarasi CSS berlaku untuk semua elemen yang dituju oleh selector kedua yang berada setelah elemen pertama. Seperti adjacent sibling, elemen kedua harus tidak berada didalam elemen pertama.

Untuk menggunakan kombinasi general sibling selector kita gunakan operator dengan karakter ~.

Contoh penggunaan general sibling selector :

div ~ p {
    background-color: yellow;
}
Untuk lebih jelas, kita bisa berlatih general sibling selector disini >>.

Lihat indeks artikel Tutorial CSS Dasar >>

Referensi :

0 komentar

Post a Comment