nth-last-child () adalah pemilih pseudo-class CSS yang memungkinkan kalian memilih elemen berdasarkan indeks (urutan sumber) di dalam wadahnya, mulai dari elemen terakhir ke atas.

Teman-teman bisa memberikan angka positif sebagai argumen ke: nth-last-child (), yang akan memilih elemen yang indeksnya di dalam induknya cocok dengan argumen: nth-last-child (). Misalnya, li: nth-last-child (3) akan memilih item daftar ketiga hingga terakhir; yaitu, item ketiga dari bawah (mulai dari item terakhir).

Anda juga dapat memasukkan salah satu dari dua kata kunci yang telah ditentukan: genap dan ganjil. li: nth-child (datar) akan memilih semua item daftar dengan nomor indeks genap (2, 4, 6, 8, dll.), dan li: nth-child (datar) akan memilih semua item daftar dengan nomor indeks ganjil (1 , 3, 5, 7, dll.).

: nth-last-child () juga memungkinkan Anda memilih satu atau lebih elemen menggunakan rumus (atau persamaan) —an + b — yang diteruskan sebagai argumen. Sintaksnya adalah: nth-last-child (an + b), di mana Anda mengganti a dan b dengan nilai integer Anda sendiri sehingga, setelah n diganti dengan angka positif (0, 1, 2, 3, dll.), angka yang dihasilkan adalah indeks elemen yang ingin Anda pilih. Misalnya,: nth-last-child (3n +1) akan memilih anak ke-1 (3 * 0 +1 = 1) dari bawah, anak ke-4 (3 * 1 +1 = 4) dari bawah, ke-7 (3) * 2 +1 = 7) anak dari bawah, dll. Dan seterusnya.

Apa: nth-last-child (an + b) yang dilakukan adalah ia membagi anak-anak wadah menjadi elemen (kelompok terakhir mengambil sisanya), dan kemudian memilih elemen ke-b dari masing-masing kelompok. Jadi, li: nth-last-child (3n +1) akan membagi daftar item menjadi 3 grup, meletakkan item sisanya dalam grup keempat (jika jumlah item tidak habis dibagi 3), dan kemudian akan cocok dengan item pertama di setiap grup.

Sebagai contoh, gambar berikut ini menunjukkan hasil pemilihan li: nth-last-child (3n + 1) dalam daftar item. Ada 11 item dalam daftar, dan kami memiliki = 3, sehingga 11 item akan dibagi dengan 3. 11/3 = 3 + 2, sehingga akan ada dua item yang tersisa yang akan dikelompokkan ke dalam grup terakhir dari item mereka. sendiri. Kemudian, untuk masing-masing dari empat grup, item pertama akan dipilih. Pada gambar berikut, item yang cocok memiliki latar belakang khaki.

Saat meneruskan formula ke: nth-last-child (), browser akan beralih melalui semua anak wadah dan kemudian pilih yang cocok dengan formula. Daftar item diperlakukan sebagai item array, di mana setiap item memiliki indeks yang mungkin cocok atau tidak cocok dengan hasil rumus.

Contoh

Berikut ini adalah valid: deklarasi nth-last-child ():