Pada kesempatan sebelumnya telah kita bahas secara detail mengenai pseudo class :nth-child, pada kesempatan kali ini kita akan bahas pseudo class selector :nth-last-child. Pseudo class ini sama persis dengan pseudo class :nth-child, bedanya hanya satu yaitu urutan dimulai dari element terakhir.
Pseudo Class :nth-last-child
Seperti namanya, selector ini akan menseleksi element html (seperti: div, p, article, dll) ke nth (1th, 2th, 3th, dst..) yang posisinya sebagai children terhadap parent yang sama, dimana urutannya dihitung mulai dari element terakhir. Jangan terkecoh dengan istilah child karena semua element pada dasarnya adalah chidren (kecuali <body>), setidaknya terhadap parent utama yaitu <body>.
Seperti pada pseudo class yang berjenis “structural pseudo-class“, selector akan menseleksi element children dari tiap-tiap parent yang ada di dalam suatu group element, perhatikan contoh berikut:
- List 1
- List 2
- List 3
- List 4
- List 5
- List 6
- List 7
- List 8
- List 9
- List 10
Struktur HTML nya:
<ul class="sample-nth-last">
<li>List 1</li>
<li>List 2
<ul>
<li>List 3</li>
<li>List 4</li>
</ul>
<li>List 5</li>
<li>List 6
<ul>
<li>List 7</li>
<li>List 8</li>
</ul>
</li>
<li>List 9</li>
<li>List 10</li>
</ul>CSS rule nya:
.sample-nth-last li:nth-last-child(1)
{
color: red;
}
.sample-nth-last li:nth-last-child(2)
{
color: blue;
}
.sample-nth-last li:nth-last-child(3)
{
color: yellow;
}Pada contoh diatas, :nth-last-child akan berpengaruh ke semua element li yang memiliki parent ul, di semua level kedalaman.
Argumen Pada Pseudo Class :nth-last-child
Seperti pada selector :nth-child, selector ini menerima tiga jenis argumen yaitu keyword, angka, dan formula. Pada pembahasan penggunaan argumen (dibahas di bagian bawah) kita akan menggunakan struktur HTML:
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>- Keyword. Argumen ini terdiri dari odd(ganjil) dan even(genab), contoh
:nth-last-child(odd)akan menseleksi element ke 1,3,5,dst dan:nth-last-child(even)yang akan menseleksi element ke 2, 4, 6, dst dihitung mulai dari element terakhir.
Misal:- 1
- 2
- 3
- 4
- 5
- 6
- 7
li:nth-last-child(odd) { background-color: #6FA9FF; } - Numeric (angka), yang akan menseleksi element yang posisinya sesuai dengan angka yang ada pada argumen, posisi tersebut dihitung mulai dimulai dari element terakhir.
Misal:- 1
- 2
- 3
- 4
- 5
- 6
- 7
li:nth-last-child(3) { background-color: #6FA9FF; } - Formula. Formula ditulis menggunakan format an+b, dimana (1) a merupakan angka, (2) n tetap sebagai huruf n yang mencerminkan suatu urutan dimulai dari angka 0, angka selanjutnya bisa bernilai negatif -0,-1,-2, dst.. atau positif 0,1,2,dst… (3) operator bisa + atau -, dan (4) b merupakan angka yang digunakan jika formula menggunakan operator. Contoh:
:nth-last-child(n+5)akan menseleksi element (urut dari belakang): 0(0+5) – tidak digunakan, 6(1+5), 7(2+5), 8(3+5), dst…- 1
- 2
- 3
- 4
- 5
- 6
- 7
li:nth-last-child(n+5) { background-color: #6FA9FF; }:nth-last-child(-n+3)akan menseleksi element (urut dari belakang): 3(-0+3) , 2(-1+3), dan 1(-2+3)- 1
- 2
- 3
- 4
- 5
- 6
- 7
li:nth-last-child(-n+3) { background-color: #6FA9FF; }:nth-last-child(n+3):nth-last-child(-n+5)akan menseleksi element yang memenuhi kedua kriteria tersebut yaitu element ke 3,4,5,6,dst… dan 5,4,3,2,dst… sehingga yang terseleksi element ke 3,4, dan 5- 1
- 2
- 3
- 4
- 5
- 6
- 7
li:nth-last-child(n+3):nth-last-child(-n+5) { background-color: #6FA9FF; }:nth-last-child(3n+1), akan menseleksi element (urut dari belakang) 1(3×0 + 1), 4(3×1 + 1 ), 7(3×2 + 1), dst…- 1
- 2
- 3
- 4
- 5
- 6
- 7
li:nth-last-child(3n+1) { background-color: #6FA9FF; }
Browser support
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Basic support | 4.0 | 3.5 (1.9.1) | 9.0 | 9.5 | 3.2 |
Sumber: Mozilla Developer Network
Kesimpulan
Pseudo class selector :nth-last-child berfungsi sama dengan pseudo class :nth-child, bedanya urutan dihitung mulai element terakhir. Meski mungkin jarang digunakan, pada kondisi tertentu kita tetap membutuhkannya, seperti ketika menyesuaikan padding thumbnail gallery, oleh karena itu setidaknya kita mengetahui nama dan fungsi selector ini.
Demikian tutorial mengenai pseudo class selector :nth-last-child, semoga bermanfaat
Salam JWD
Subscibe Now
Suka dengan artikel di Jagowebdev.com? jangan sampai ketinggalan, segera join ke milis kami untuk update informasi terbaru dari Jagowebdev.com