nth-last-of-type () adalah pemilih pseudo-class CSS yang memungkinkan kalian untuk memilih elemen dari tipe yang sama berdasarkan indeks mereka (urutan sumber) di dalam wadah mereka, mulai dari elemen terakhir ke atas.
Mirip dengan: nth-last-child, kecuali lebih spesifik — hanya elemen dari tipe yang ditentukan yang akan dipilih.
Anda bisa memikirkannya dengan cara ini: browser memilih semua elemen dari jenis yang sama di dalam sebuah wadah, dan kemudian memperlakukan mereka seolah-olah mereka adalah array elemen, di mana setiap elemen memiliki indeks dalam array itu. Kemudian, dengan menggunakan argumen yang diteruskan ke: nth-last-of-type (), ia memilih semua elemen array yang indeksnya cocok dengan nilai argumen, mulai dari elemen terakhir hingga yang pertama. Misalnya, p: n-tipe terakhir (…) akan memfilter paragraf di dalam sebuah wadah, dan kemudian pilih yang cocok dengan nilai argumen: n-tipe terakhir () mulai dari paragraf terakhir ke atas.
Anda bisa memberikan angka positif sebagai argumen ke: nth-last-of-type (), yang akan memilih elemen yang indeksnya di dalam induknya cocok dengan argumen: nth-last-of-type (). Sebagai contoh, p: n-tipe terakhir (3) akan memilih paragraf dengan nilai indeks 3; yaitu, ia akan memilih paragraf ketiga (dari yang terakhir) di antara paragraf yang ada.
Anda juga dapat memasukkan salah satu dari dua kata kunci yang telah ditentukan: genap dan ganjil. p: n-tipe terakhir (genap) akan memilih semua paragraf daftar dengan nomor indeks genap (2, 4, 6, 8, dll.), dan p: n tipe terakhir (tipe ganjil) akan memilih semua paragraf dengan angka indeks ganjil (1, 3, 5, 7, dll.).
: nth-last-of-type () juga memungkinkan Anda memilih satu atau lebih elemen menggunakan rumus (atau persamaan) —an + b — yang diteruskan sebagai argumen. Sintaksnya adalah: n-tipe terakhir (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,: n-tipe terakhir (3n + 1) akan memilih anak pertama (3 * 0 +1 = 1) dari anak terakhir, 4 (3 * 1 +1 = 4) dari anak terakhir, ke-7 (3 * 2 +1 = 7) anak dari yang terakhir, … dan seterusnya.
Apa yang dilakukan: n-last-of-type (an + b) adalah membagi anak-anak wadah menjadi elemen (kelompok terakhir mengambil sisanya) dari bawah ke atas, dan kemudian memilih elemen ke-10 dari setiap kelompok, juga mulai dari elemen terakhir di setiap grup. Jadi, p: n-tipe terakhir (3n + 1) akan membagi jumlah paragraf menjadi 3 grup, meletakkan sisanya dalam grup keempat (jika jumlah paragraf tidak dibagi 3), dan kemudian akan membagi cocokkan item pertama dari bawah di setiap grup.
Sebagai contoh, gambar berikut ini menunjukkan hasil pemilihan p: n-tipe terakhir (3n +1) dalam wadah yang berisi paragraf (latar belakang hitam), serta elemen tipe lainnya (daftar dengan latar belakang abu-abu terang). Ada 11 paragraf dalam wadah, dan kami memiliki a = 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 mereka sendiri (di atas). Kemudian, untuk masing-masing dari empat kelompok, paragraf pertama dari bawah akan dipilih. Pada gambar berikut, paragraf yang cocok memiliki latar belakang biru.
Contoh berikut memilih baris genap dalam tabel, mulai dari bawah ke atas, dan menerapkan warna latar belakang untuk membuat efek zebra. Ini memiliki efek yang sama dengan menggunakan: nth-of-type () atau: nth-child () dengan nilai genap.
|
1 2 3 |
tr:nth-last-of-type(even) { background-color: #eee; } |
Berikut ini adalah valid: deklarasi n-last-of-type ():
|
1 2 3 4 5 6 7 8 9 |
li:nth-last-of-type(-n+1) {} p:nth-last-of-type(odd) {} tr:nth-last-of-type(2n) {} /* 2n is equivalent to "even" */ article:nth-last-of-type(2n+1) {} /* 2n+1 is equivalent to "odd" */ li:nth-last-of-type(4n+1) {} |