The :nth-of-typepemilih 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.
Misalkan kita memiliki daftar yang tidak berurutan dan ingin "zebra-stripe" mengganti item daftar:
- First Item
- Second Item
- Third Item
- Fourth Item
- Fifth Item
Daripada menambahkan kelas ke setiap item daftar (misalnya .even& .odd) kita dapat menggunakan :nth-of-type:
li ( background: slategrey; ) /* select alternating items starting with the second item */ li:nth-of-type(2n) ( background: lightslategrey; )Seperti yang Anda lihat, :nth-of-typemengambil argumen: ini bisa berupa bilangan bulat tunggal, kata kunci "genap" atau "ganjil", atau rumus seperti yang ditunjukkan di atas. Jika bilangan bulat ditentukan, hanya satu elemen yang dipilih-tetapi kata kunci atau formula akan mengulang melalui semua turunan dari elemen induk dan memilih elemen yang cocok-mirip dengan menavigasi item dalam larik di JavaScript. Kata kunci “genap” dan “ganjil” bersifat langsung, tetapi 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-of-typepenyeleksi yang valid :
Untungnya, Anda tidak selalu harus menghitung sendiri - ada beberapa :nth-of-typepenguji dan generator di luar sana:
- Penguji Trik CSS
- Penguji Lea Verou
Tempat Menarik
:nth-of-typeiterasi melalui elemen mulai dari atas urutan sumber. Satu-satunya perbedaan antara itu dan:nth-last-of-typeadalah bahwa yang terakhir melakukan iterasi melalui elemen-elemen yang dimulai dari bagian bawah urutan sumber.- The
:nth-of-typepemilih sangat mirip dengan:nth-childtetapi dengan satu perbedaan penting: lebih 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-childakan mencoba mencocokkan semua saudara, tidak hanya saudara dari jenis elemen yang sama. Ini mengungkapkan kekuatan:nth-of-type-it menargetkan jenis elemen tertentu dalam pengaturan yang berhubungan dengan saudara yang mirip, tidak semua saudara kandung.
Dukungan Browser
| Chrome | Safari | Firefox | Opera | YAITU | Android | iOS |
|---|---|---|---|---|---|---|
| Bekerja | 3.2+ | Bekerja | 9,5+ | 9+ | Bekerja | Bekerja |
:nth-of-typediperkenalkan 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.