The :nth-last-childpemilih memungkinkan Anda memilih satu atau lebih elemen berdasarkan urutan sumber mereka, menurut formula. Ini didefinisikan dalam spesifikasi CSS Selectors Level 3 sebagai "struktural pseudo-class", yang berarti digunakan untuk mengatur gaya konten berdasarkan hubungannya dengan elemen induk dan saudara kandung. Ini berfungsi sama seperti :nth-childkecuali memilih item mulai dari bagian bawah urutan sumber, bukan atas.
Misalkan kita memiliki daftar dengan jumlah item yang tidak diketahui, dan kita ingin menyorot item kedua hingga terakhir (dalam contoh yang tepat ini, "Item Keempat"):
- First Item
- Second Item
- Third Item
- Fourth Item
- Fifth Item
Daripada melakukan sesuatu seperti menambahkan kelas ke item daftar (misalnya .highlight) kita dapat menggunakan :nth-last-child:
li ( background: slategrey; ) /* select the second-last item */ li:nth-last-child(2) ( background: lightslategrey; )Seperti yang Anda lihat, :nth-last-childmengambil argumen: ini bisa berupa bilangan bulat tunggal, kata kunci "genap" atau "ganjil", atau rumus. Jika bilangan bulat ditentukan, hanya satu elemen yang dipilih - tetapi kata kunci atau rumus akan mengulang melalui semua turunan elemen induk dan memilih elemen yang cocok-mirip dengan menavigasi item dalam larik di JavaScript. Kata kunci "genap" dan "ganjil" bersifat langsung (masing-masing 2, 4, 6 dst atau 1, 3, 5). Rumusnya dibuat menggunakan sintaks an+b, di mana:
- "A" adalah nilai integer
- “N” adalah huruf literal “n”
- “+” Adalah operator dan bisa berupa “+” atau “-”
- “B” adalah bilangan bulat dan diperlukan jika operator disertakan dalam rumus
Penting untuk dicatat bahwa rumus ini adalah persamaan, dan mengulangi setiap elemen saudara kandung, menentukan mana yang akan dipilih. Bagian "n" dari rumus, jika disertakan, mewakili himpunan bilangan bulat positif yang meningkat (seperti melakukan iterasi melalui larik). Dalam contoh di atas, kami memilih setiap elemen kedua dengan rumus 2n, yang berfungsi karena setiap kali elemen diperiksa, "n" bertambah satu (2 × 0, 2 × 1, 2 × 2, 2 × 3, dll). Jika urutan elemen cocok dengan hasil persamaan, itu akan dipilih (2, 4, 6, dll). Untuk penjelasan lebih mendalam tentang matematika yang terlibat, silakan baca artikel ini.
Untuk menggambarkan lebih jauh, berikut beberapa contoh :nth-last-of-typepenyeleksi yang valid :
Untungnya, Anda tidak selalu harus menghitung sendiri - ada beberapa :nth-last-childpenguji dan generator di luar sana:
- Penguji Trik CSS
- Penguji Lea Verou
Tempat Menarik
:nth-last-childiterasi melalui elemen mulai dari bagian bawah urutan sumber. Satu-satunya perbedaan antara itu dan:nth-childadalah bahwa yang terakhir melakukan iterasi melalui elemen-elemen yang dimulai dari atas urutan sumber.- The
:nth-last-childpemilih sangat mirip dengan:nth-last-of-typetetapi dengan satu perbedaan penting: itu adalah kurang spesifik. Dalam contoh kita di atas, mereka akan menghasilkan hasil yang sama karena kita hanya melakukan iterasi padalielemen, tetapi jika kita melakukan iterasi pada grup saudara yang lebih kompleks,:nth-last-childakan mencoba mencocokkan semua saudara, tidak hanya saudara dari jenis elemen yang sama. Ini menunjukkan kekuatan:nth-last-child-it dapat memilih elemen saudara dalam sebuah pengaturan, tidak hanya elemen yang ditentukan sebelum titik dua.
Dukungan Browser
| Chrome | Safari | Firefox | Opera | YAITU | Android | iOS |
|---|---|---|---|---|---|---|
| Bekerja | 3.2+ | Bekerja | 9,5+ | 9+ | Bekerja | Bekerja |
:nth-last-childdiperkenalkan di CSS Selectors Module 3, yang berarti browser versi lama tidak mendukungnya. Namun, dukungan browser modern sangat sempurna, dan pseudo-selector baru digunakan secara luas di lingkungan produksi. Jika Anda memerlukan dukungan browser yang lebih lama, baik polyfill untuk IE, atau gunakan penyeleksi ini dengan cara yang tidak kritis seperti peningkatan progresif, yang direkomendasikan.