Tutorial Belajar CSS: Pengertian dan Cara Penggunaan Child Selector CSS

Posted on

Pada Panduan Belajar CSS kali ini kita akan membahas diantara selector lanjutan CSS yang disebut dengan Child Selector, serta perbedaannya dengan descendant selector.


Pengertian Child Selector CSS

Child Selector yaitu selector di pada CSS yang penggunaannya di dasarkan di struktur urutan tag HTML.

Karena tag-tag HTML dapat berisi tag lain, karenanya struktur HTML dapat diibaratkan dengan ‘pohon keluarga’. Dimana sebuah tag dapat disebut selaku ‘induk’ dari tag lain, dan dapat pun disebut selaku ‘anak’ dari tag lainnya. Istilah ‘anak’ inilah yang menjadi kata ‘child’ pada Child Selector CSS.

Selaku contoh stuktur hubungan induk anak pada HTML (parent-child relationship), berikut yaitu kode HTML sederhana:

Kode HTML diatas terdiri dari beberapa tag header, tag div, tag paragraf dan struktur list. Silahkan kamu pelajari sesaat kode HTML tersebut, dan bandingkan dengan struktur ‘pohon’ berikut ini:

Dapat terlihat bahwa seluruh tag HTML mempunyai hubungan ‘kekeluargaan’ satu dengan yang lain. Tag <em> adalah sebuah ‘child’ dari tag <p>, dan tag <p> pun adalah sebuah ‘child’ dari tag <div>.

Kembali mengenai child selector, selector ini mengizinkan kita bagi menyeleksi tag HTML merujuk pada aturan child-parent ini. Perhatikan selector CSS berikut ini:

Tanda “>” pada selector diatas menandakan child selector. Selector div > h2 berarti cari seluruh tag <h2> yang adalah sebuah ‘child’ atau ‘anak’ dari tag <div>. Pada contoh struktur pohon kita, terdapat 1 buah tag <h2> yang berada dibawah tag <div>. Tag h2 inilah yang ‘ditangkap’ dengan selector div > h2.


Perbedaan antara Child Selector dengan Descendant Selector

Kalau kamu pernah merancang kode CSS sebelumnya, karenanya child selector ini akan terasa mirip dengan selector umum CSS yang dikenal dengan descendant selector.

Perhatikan 2 buah selector CSS berikut ini:

Baris pertama-tama adalah sebuah descendant selector, sedangkan baris kedua yaitu child selector. Keduanya akan merancang tag <h2> yang berada dibawah tag <div> menjadi warna hijau. Jadi, apa perbedaan keduanya?

Descendant selector (gabungan selector yang dipisah dengan tanda spasi) akan mencari seluruh tag <h2> yang berada di pada tag <div>, walaupun tag <h2> tersebut berada di pada tag lain (nested tag). Dalam rentang waktu tag <h2> berada di bawah tag <div>, karenanya div.main h2 akan menemukan tag tersebut.

Berbeda dengan descendant selector, child selector hanya akan mencari seluruh tag <h2> yang adalah sebuah turunan seketika dari tag <div>.

Agar lebih gampang dimengerti, perhatikan kode CSS berikut ini:

Kode CSS tersebut akan merancang seluruh tag <li> yang berada di pada tag <ul class=”nav”> mempunyai warna text hijau, termasuk apabila list tersebut mempunyai list pun (list bersarang) atau nested list.

Selaku contoh, berikut yaitu list HTML yang akan kita tambahkan kode CSS diatas:

Karenanya hasil yang didapat yaitu
selaku berikut:

Perhatikan bahwa seluruh text akan berwarna hijau, termasuk tag <li> yang bukan secara seketika berada di bawah tag <ul class=”nav”>.

Namun bagaimana apabila kita menginginkan hanya 1 level list saja yang akan diubah? atau dengan kata lain, hanya ‘child’ saja, tak termasuk ‘grand child’, atau nested list? Karenanya berikut yaitu selector CSSnya:

Maksud dari selector tersebut yaitu: cari seluruh tag <li> yang adalah sebuah ‘child’ dari tag <ul class=nav>. Karena selector tersebut hanya mencari tag <li> yang adalah sebuah ‘anak’ seketika dari tag <ul>, karenanya nested list tak akan berefek.

Dengan menggunakan kode HTML yang sama, berikut yaitu hasil yang kita dapat:


Panduan Child Selector CSS

Selaku panduan, kita akan menggunakan child selector yang kita pelajari pada pembahasan diatas. Berikut yaitu kode HTML+CSSnya:

 Pada contoh diatas, saya merancang 3 child selector dengan menggunakan contoh-contoh selector yang telah kita pelajari pada panduan kali ini.


Struktur “parent-child” tak hanya bermanfaat pada memahami child selector CSS, pada panduan berikutnya, kita akan membahas beberapa pseudo class selector yang berkaitan dengan hubungan “parent-child”, seperti :first-child, :nth-child(N), dan :last-child pada Panduan Belajar CSS: Cara Pemakaian Child Pseudo Class Selector.


Sumber https://www.duniailkom.com/