jQuery :first-of-type Selector
Contoh
Memilih setiap elemen <p> dimana elemen <p> tersebut berada pada urutan pertama dari elemen <p> lainnya dalam elemen induk yang sama.
Defenisi dan Penggunaan
Selektor :first-of-type digunakan untuk memilih elemen jenis tertentu yang merupakan elemen turunan yang berada pada urutan pertama dari elemen sejenisnya dalam satu elemen induk yang sama.
Sebagai Contoh, misalnya kita mempunyai struktur kode seperti berikut ini:
Pada struktur kode di atas, kode yang berwarna merah disebut sebagai elemen induk, sehingga setiap elemen yang terdapat di dalamnya (di antara tag pembuka (<div>) dan tag penutupnya (</div>), merupakan elemen turunannya, atau child element.
Di dalam elemen induk tersebut pada contoh di atas, ada terdapat tiga elemen turunan di dalamnya, yaitu elemen span (berwarna ungu), elemen paragraf pertama (berwarna hijau) dan elemen paragraf kedua (berwarna biru).
Elemen yang berwarna ungu disebut sebagai first-child element atau elemen turunan pertama, sebab ia menduduki urutan pertama dari elemen turunan lainnya dalam induk elemen yang sama. Sementara elemen yang berwarna hijau disebut sebagai first-of-type dari elemen <p>, sebab ia merupakan elemen <p> yang paling pertama dari elemen <p> lainnya dalam induk elemen yang sama.
Jadi, selektor :first-of-type akan memilih elemen untuk jenis tertentu saja, yang urutannya paling awal dari elemen sejenisnya dalam satu induk elemen yang sama.
Tip: Gunakan selektor :last-of-type untuk memilih seluruh elemen yang merupakan elemen turunan terakhir, dari induknya.
Rumus
Contoh Penggunaan
Mewarnai latar belakang dari seluruh elemen "p" yang merupakan elemen "p" turunan pertama di antara elemen "p" lainnya dalam elemen induk yang sama, 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 black"> <p>Paragraf</p> <p>Paragraf</p> </div> <br> <div style="border:1px solid black"> <span>Span</span> <p>Paragraf</p> <p>Paragraf</p> </div> <br> <div style="border:1px solid black"> <div>Division</div> <span>Span</span> <p>Paragraf</p> <div>Division</div> <p>Paragraf</p> </div> <script> $(document).ready(function(){ $("p:first-of-type").css("background-color","green"); }); </script> </body> </html>Anda bisa langsung mengedit isi dari kode-kode di atas dan melihat perubahannya.
Hasilnya:
