The :nth-last-childpemilih membolehkan anda memilih satu atau lebih unsur-unsur berdasarkan perintah sumber mereka, menurut formula. Ini didefinisikan dalam spesifikasi CSS Selectors Level 3 sebagai "kelas pseudo struktural", yang bermaksud ia digunakan untuk menggayakan konten berdasarkan hubungannya dengan elemen ibu bapa dan saudara. Ini berfungsi sama seperti :nth-childkecuali memilih item mulai dari bawah urutan sumber, bukan yang teratas.
Andaikan kita mempunyai senarai dengan jumlah item yang tidak diketahui, dan kita ingin menonjolkan 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 senarai (contohnya .highlight) kita boleh 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 boleh menjadi bilangan bulat tunggal, kata kunci "genap" atau "ganjil", atau formula. Sekiranya bilangan bulat ditentukan hanya satu elemen yang dipilih - tetapi kata kunci atau formula akan berulang melalui semua anak elemen induk dan memilih elemen yang sepadan-serupa dengan menavigasi item dalam array dalam JavaScript. Kata kunci "genap" dan "ganjil" adalah mudah (masing-masing 2, 4, 6 dll atau 1, 3, 5). Rumus dibina menggunakan sintaks an+b, di mana:
- "A" adalah nilai integer
- "N" adalah huruf harfiah "n"
- "+" Adalah pengendali dan mungkin "+" atau "-"
- "B" adalah bilangan bulat dan diperlukan jika operator disertakan dalam formula
Penting untuk diperhatikan bahawa formula ini adalah persamaan, dan berulang melalui setiap elemen saudara, menentukan mana yang akan dipilih. Bahagian "n" dari formula, jika disertakan, mewakili sekumpulan bilangan bulat positif yang meningkat (seperti melakukan lelaran melalui array). Dalam contoh di atas, kami memilih setiap elemen kedua dengan formula 2n, yang berfungsi kerana setiap kali elemen diperiksa, "n" meningkat satu (2 × 0, 2 × 1, 2 × 2, 2 × 3, dll). Sekiranya susunan elemen sepadan dengan hasil persamaan, ia akan dipilih (2, 4, 6, dll). Untuk penjelasan yang lebih mendalam mengenai matematik yang terlibat, sila baca artikel ini.
Untuk menggambarkan lebih lanjut, berikut adalah beberapa contoh :nth-last-of-typepemilih yang sah :
Nasib baik, anda tidak perlu melakukan matematik sendiri-ada beberapa :nth-last-childpenguji dan penjana di luar sana:
- Penguji Trik CSS
- Penguji Lea Verou
Tempat Menarik
:nth-last-childberulang melalui elemen bermula dari bawah susunan sumber. Satu-satunya perbezaan antara ia:nth-childadalah bahawa yang terakhir berulang melalui elemen bermula dari bahagian atas susunan sumber.- The
:nth-last-childpemilih adalah hampir sama dengan:nth-last-of-typetetapi dengan satu perbezaan kritikal: ia adalah kurang tertentu. Dalam contoh kita di atas, mereka akan menghasilkan hasil yang sama kerana kita melakukan iterasi hanya padalielemen, tetapi jika kita melakukan lelaran pada kumpulan adik beradik yang lebih kompleks,:nth-last-childakan cuba memadankan semua adik-beradik, bukan hanya adik-beradik dengan jenis elemen yang sama. Ini menunjukkan kekuatan:nth-last-child-it dapat memilih unsur saudara dalam susunan, bukan hanya elemen yang ditentukan sebelum titik dua.
Sokongan Penyemak Imbas
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Berfungsi | 3.2+ | Berfungsi | 9.5+ | 9+ | Berfungsi | Berfungsi |
:nth-last-childdiperkenalkan dalam CSS Selectors Module 3, yang bermaksud versi lama penyemak imbas tidak menyokongnya. Walau bagaimanapun, sokongan penyemak imbas moden sempurna, dan pemilih semu baru digunakan secara meluas dalam persekitaran pengeluaran. Sekiranya anda memerlukan sokongan penyemak imbas yang lebih lama, baik polyfill untuk IE, atau gunakan pemilih ini dengan cara yang tidak kritikal á la peningkatan progresif, yang disyorkan.