Pada Tutorial Belajar CSS kali ini kita akan membahas salah satu advanced CSS selector yang disebut dengan Child Selector, serta perbedaannya dengan descendant selector Show
Arti CSS Pemilih AnakPemilih Anak adalah pemilih dalam CSS yang penggunaannya didasarkan pada struktur urutan tag HTML Karena tag HTML dapat berisi tag lain, struktur HTML dapat disamakan dengan 'silsilah keluarga'. Dimana suatu tag bisa disebut 'induk' dari tag lain, dan bisa juga disebut 'anak' dari tag lain. Istilah 'anak' adalah kata 'anak' dalam CSS Pemilih Anak Sebagai contoh struktur hubungan orangtua-anak dalam HTML (hubungan orangtua-anak), berikut adalah kode HTML sederhana <!DOCTYPE html> <html> <head> <title>Belajar Child Selector CSS</title> </head> <body> <h1>Belajar Child Selector CSS</h1> <h2>Tutorial Belajar CSS</h2> <div class="wrapper"> <h2>Pengantar CSS</h2> <p><em>HTML</em> dan <strong>CSS</strong> adalah bagian tak terpisahkan dari website modern saat ini. HTML digunakan untuk membuat konten atau kerangka logis dari halaman web, sedangkan CSS digunakan untuk mengatur tampilan dari website, <span>seperti warna dan font yang digunakan.</span></p> <h3>Pengertian CSS</h3> <p>Dalam bahasa bakunya, seperti di kutip dari <cite>wikipedia</cite>, CSS adalah <em>“kumpulan kode yang digunakan untuk mendefenisikan desain dari bahasa markup”</em>, dimana bahasa markup ini salah satunya adalah HTML.</p> </div> <h3>Menu Tutorial di Duniailkom.com:</h3> <ul> <li>Tutorial Belajar HTML</li> <li>Tutorial Belajar CSS</li> <li>Tutorial Belajar PHP</li> <li>Tutorial Belajar JavaScript</li> <li>Tutorial Belajar MySQL</li> <li>Tutorial Belajar jQuery</li> <li>Tutorial Belajar Sass</li> <li>Tutorial Belajar Bootstrap</li> <li>Tutorial Belajar Laravel</li> </ul> </body> </html> Kode HTML di atas terdiri dari beberapa tag header, tag div, tag paragraf, dan struktur daftar. Silakan pelajari kode HTML sejenak, dan bandingkan dengan struktur 'pohon' berikut Dapat terlihat bahwa seluruh tag HTML memiliki hubungan ‘kekeluargaan’ satu dengan yang lain. Tag merupakan ‘child’ dari tag , dan tag juga merupakan ‘child’ dari tag Kembali ke pemilih anak, pemilih ini memungkinkan kita untuk memilih tag HTML berdasarkan aturan anak-orang tua. Perhatikan pemilih CSS berikut Tanda “>” dalam selector diatas menandakan child selector. Selector div > h2 berarti cari seluruh tag Jika Anda pernah membuat kode CSS sebelumnya, maka pemilih anak ini akan terasa mirip dengan pemilih CSS umum yang dikenal sebagai pemilih keturunan Perhatikan 2 CSS Selector berikut ini Baris pertama merupakan descendant selector, sedangkan baris kedua adalah child selector. Keduanya akan membuat tag Sebagai tutorial, kita akan menerapkan child selector yang telah kita pelajari pada pembahasan di atas. Berikut adalah kode HTML+CSS Struktur "parent-child" tidak hanya berguna untuk memahami CSS child selector, pada tutorial selanjutnya kita akan membahas beberapa pseudo class selector yang berhubungan dengan hubungan "parent-child", seperti. anak pertama,. nth-child(N), dan. anak terakhir dalam Tutorial Pembelajaran CSS. Cara Menggunakan Pemilih Kelas Pseudo Anak |