jQuery :first-child Selector
Contoh
Memilih setiap elemen <p> yang merupakan elemen turunan pertama dari induknya.
Defenisi dan Penggunaan
Selektor :first-child adalah untuk memilih seluruh elemen yang merupakan elemen turunan pertama dari satu elemen induk yang sama.
Berikut ini adalah ilustrasi struktur kode yang mengandung child element atau elemen turunan dari satu induk elemen.
Catatan: kode berwarna merah adalah elemen induk atau elemen utama, sehingga setiap elemen yang berada di dalamnya (di antara tag pembuka dan tag penutupnya) adalah merupakan elemen turunannya atau child element.
Nah, dari kode di atas, kode yang berwarna hijau itulah yang dimaksud dengan elemen turunan pertama dari satu elemen induk yang sama, atau first-child element.
Tip: Gunakan selektor :last-child untuk memilih elemen turunan yang terakhir dari induknya.
Rumus
Contoh Penggunaan
Mewarnai latar belakang dari seluruh elemen "p" yang merupakan elemen turunan pertama dari induknya, menjadi warna hijau.
x
<html> <head> <script src="https://cdn.rawgit.com/cholebeharia/blogku/1a8ade58/jquery.min.js"></script> </head> <body> <div style="border:1px solid yellow"> <p>1. Paragraf</p> <p>2. Paragraf</p> </div> <br> <div style="border:1px solid red"> <div>1. Division</div> <p>2. Paragraf</p> </div> <br> <div style="border:1px solid purple"> <div> <p>1. Paragraf</p> <p>2. Paragraf</p> </div> </div> <script> $(document).ready(function(){ $("p:first-child").css("background-color","green"); }); </script> </body> </html>Anda bisa langsung mengedit isi dari kode-kode di atas dan melihat perubahannya.
Hasilnya:
