Selektor Descendant - Selektor CSS #4

Selektor Descendant atau lebih dikenal dengan nama selektor turunan merupakan selektor CSS yang lebih menspesifikasikan pemilihan elemennya dalam sebuah halaman HTML. Jadi selektor ini berbeda dengan selektor-selektor sebelumnya. Bisa dikatakan selektor turunan ini berfungsi mengatur bagian yang lebih dalam dari ketiga selektor sebelumnya (selektor type, selektor class, dan selektor ID).

Fungsi Selektor Descendant
Fungsi utama dari selektor ini adalah memilih elemen web secara lebih spesifik, yaitu memilih sebuah elemen  dalam web yang berisi elemen web lain yang juga terpilih, yang kemudian tampilannya akan diubah sesuai dengan yang dideklarasikan pada file  CSS sebelumnya.

Dengan selektor turunan, kita dapat mengontrol tampilan web lebih mudah dan spesifik. Selain itu kita dapat melakukan perubahan tampilan web lebih detail tanpa mempengaruhi tampilan secara keseluruhan.

Contoh Syntax
Selektor descendant hanya akan memilih sebuah elemen jika hanya elemen tersebut merupakan turunan dari elemen yang telah ditentukan sebelumnya. Untuk lebih jelasnya coba lihat contonya berikut:

Misalnya kita menginginkan sebuah daftar unordered list (ul) yang berisi selektor turunan strong memiliki  font dengan warna biru. Maka dapat kita tuliskan syntax CSS-nya seperti ini:
ul li strong{
     color: blue;
}
Pada syntax CSS diatas, selektor akan memilih elemen <ul> terlebih dahulu, kemudian akan menyeleksi daftar (list <li>), lalu akan memilih kembali elemen strong dalam daftar tersebut. Contoh kode HTML berikut akan menampilkan hasil dari syntax CSS diatas.
<ul>
<li>Di dalam selektor ul li, tapi di luar selektor strong</li>
<li><strong>Di dalam selektor ul li dan strong</strong></li>
</ul>
<strong>Di dalam selektor strong, tapi luar selektor ul li</strong>
Maka tampilan di browser akan tampak seperti gambar dibawah ini.
Selektor turunan ini juga dapat dikombinasikan dengan slektor-selektor lainnya. Seperti  selektor class dan selektor ID. Penulisan syntax-nya hampir sama dengan contoh di atas, tinggal menambahkan kode class maupun ID CSS-nya.

Kembali ke pokok bahasan tentang jenis-jenis selektor CSS » [link]
Semoga bermanfaat 


0 Comment:

Post a Comment