Cara menggunakan javascript pilih anak pertama

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 Anak

Pemilih 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

Cara menggunakan javascript pilih anak pertama

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

div > h2 {
   font-style:italic;
   font-family: Calibri;
}
_

Tanda “>” dalam selector diatas menandakan child selector. Selector div > h2 berarti cari seluruh tag

yang merupakan ‘child’ atau ‘anak’ dari tag . Dalam contoh struktur pohon kita, terdapat 1 buah tag yang berada dibawah tag . Tag h2 inilah yang ‘ditangkap’ dengan selector div > h2.Perbedaan antara Pemilih Anak dan Pemilih Keturunan

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

div.main h2 {color:green;}
div.main > h2 {color:green;}

Baris pertama merupakan descendant selector, sedangkan baris kedua adalah child selector. Keduanya akan membuat tag

yang berada dibawah tag menjadi warna hijau. Jadi, apa perbedaan keduanya?Descendant selector (gabungan selector yang dipisah dengan tanda spasi) akan mencari seluruh tag yang berada di dalam tag , walaupun tag tersebut berada di dalam tag lain (nested tag). Selama tag berada di bawah tag , maka div.main h2 akan menemukan tag tersebut.Berbeda dengan descendant selector, child selector hanya akan mencari seluruh tag yang merupakan turunan langsung dari tag .Agar lebih mudah dipahami, perhatikan kode CSS berikut iniul.nav li { color: green; }Kode CSS tersebut akan membuat seluruh tag yang berada di dalam tag memiliki warna text hijau, termasuk jika list tersebut memiliki list juga (list bersarang) atau nested list. (adsbygoogle = window.adsbygoogle || []).push({}); Sebagai contoh, berikut adalah daftar HTML yang akan kita tambahkan kode CSS di atas<ul class="nav"> <li>Tutorial Belajar HTML</li> <li>Tutorial Belajar CSS</li> <ul> <li>Pengertian CSS</li> <li>Selector CSS</li> <li>Property CSS</li> </ul> <li>Tutorial Belajar PHP</li> <li>Tutorial Belajar JavaScript</li> </ul>_Sehingga hasil yang didapatkan adalah sebagai berikutPerhatikan bahwa semua text akan berwarna hijau, termasuk tag yang bukan secara langsung berada di bawah tag .Tetapi bagaimana jika kita ingin hanya 1 daftar level yang diubah? ul.nav > li { color: green; }Maksud dari selector tersebut adalah: cari seluruh tag yang merupakan ‘child’ dari tag . Karena selector tersebut hanya mencari tag yang merupakan ‘anak’ langsung dari tag , maka nested list tidak akan berefek. (adsbygoogle = window.adsbygoogle || []).push({}); Dengan menggunakan kode HTML yang sama, inilah hasil yang kami dapatkanTutorial Pemilih Anak CSS

Sebagai tutorial, kita akan menerapkan child selector yang telah kita pelajari pada pembahasan di atas. Berikut adalah kode HTML+CSS

<!DOCTYPE html>
<html>
<head>
<title>Belajar Child Selector CSS</title>
<style type="text/css">
   div > h2 {
     font-style:italic;
     font-family: Calibri;
   }
 
   div > p {
     color:green;
   }
 
   ul.nav > li {
     color: brown;
   }
</style>
</head>
<body>

   <h1>Belajar Child Selector CSS</h1>

   <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 class="nav">
    <li>Tutorial Belajar HTML</li>
    <li>Tutorial Belajar CSS</li>
      <ul>
        <li>Pengertian CSS</li>
        <li>Selector CSS</li>
        <li>Property CSS</li>
      </ul>
    <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>
_

Cara menggunakan javascript pilih anak pertama
Pada contoh di atas, saya membuat 3 anak penyeleksi menggunakan contoh penyeleksi yang telah kita pelajari di tutorial ini


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