jQuery :last-child Selector
Contoh
Memilih setiap elemen <p> yang merupakan elemen turunan terkahir dari induk elemennya.
Defenisi dan Penggunaan
Selektor :last-child adalah selektor untuk memilih setiap elemen tertentu yang merupakan elemen turunan terakhir dari elemen induknya
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 terakhir dari satu elemen induk yang sama, atau last-child element.
Tip: Gunakan selektor :first-child untuk memilih elemen turunan yang pertama dari elemen induknya.
Rumus
Contoh Penggunaan
Mewarnai latar belakang dari seluruh elemen "p" yang merupakan elemen turunan terakhir dari elemen 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 magenta"> <div>1. Division</div> <p>2. Paragraf</p> </div> <br> <div style="border:1px solid black"> <p>1. Paragraf</p> <p>2. Paragraf</p> </div> <script> $(document).ready(function(){ $("p:last-child").css("background-color","green"); }); </script> </body> </html>Hasilnya:
