The :nth-childpemilih memungkinkan Anda untuk memilih satu atau lebih elemen berdasarkan urutan sumber mereka, menurut formula.
/* Select the first list item */ li:nth-child(1) ( ) /* Select the 5th list item */ li:nth-child(5) ( ) /* Select every other list item starting with first */ li:nth-child(odd) ( ) /* Select every 3rd list item starting with first */ li:nth-child(3n - 2) ( ) /* Select every 3rd list item starting with 2nd */ li:nth-child(3n - 1) ( ) /* Select every 3rd child item, as long as it has class "el" */ .el:nth-child(3n) ( )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 sedang membangun grid CSS, dan ingin menghapus margin pada setiap modul grid keempat. Inilah HTML itu:
One Two Three Four Five Daripada menambahkan kelas ke setiap item keempat (misalnya .last), kita dapat menggunakan :nth-child:
.module:nth-child(4n) ( margin-right: 0; )The :nth-childpemilih membawa argumen: ini bisa menjadi bilangan bulat, kata kunci even, oddatau formula. Jika bilangan bulat ditentukan, hanya satu elemen yang dipilih-tetapi kata kunci atau rumus akan mengulang melalui semua turunan dari elemen induk dan memilih elemen yang cocok - mirip dengan menavigasi item dalam larik JavaScript. Kata kunci "genap" dan "ganjil" bersifat langsung (masing-masing 2, 4, 6, dll. 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 keempat dengan rumus 4n, yang berfungsi karena setiap kali elemen dicentang, "n" bertambah satu (4 × 0, 4 × 1, 4 × 2, 4 × 3, dll). Jika urutan elemen cocok dengan hasil persamaan, itu akan dipilih (4, 8, 12, dll). Untuk penjelasan lebih mendalam tentang matematika yang terlibat, silakan baca artikel ini.
Untuk menggambarkan lebih jauh, berikut beberapa contoh :nth-childpenyeleksi yang valid :
Untungnya, Anda tidak selalu harus menghitung sendiri - ada beberapa :nth-childpenguji dan generator di luar sana:
- Penguji Trik CSS
- Penguji Lea Verou
: anak-n (an + b dari)
Ada filter yang tidak banyak diketahui yang dapat ditambahkan :nth-childsesuai dengan spesifikasi CSS Selectors: Kemampuan untuk memilih :nth-childbagian dari elemen, menggunakan of format. Misalkan Anda memiliki daftar konten campuran: Beberapa memiliki kelas .video, beberapa memiliki kelas .picture, dan Anda ingin memilih 3 gambar pertama. Anda dapat melakukannya dengan filter "dari" seperti ini:
:nth-child(-n+3 of .picture) ( /* Selects the first 3 elements applied not to ALL children but only to those matching .picture */ )Perhatikan bahwa ini berbeda dengan menambahkan selektor langsung ke :nth-childselektor:
.picture:nth-child(-n+3) ( /* Not the same! This applies to elements matching .picture which _also_ match :nth-child(-n+3) */ )Ini bisa sedikit membingungkan, jadi contoh dapat membantu menggambarkan perbedaannya:
Dukungan browser untuk filter "of" sangat terbatas: Pada tulisan ini, hanya Safari yang mendukung sintaks. Untuk memeriksa status browser favorit Anda, berikut adalah masalah terbuka yang terkait dengan :nth-child(an+b of s):
- Firefox: Dukungan untuk anak ke-n (An + B sel)
- Chrome: Implementasikan: n-anak (an + b dari S)
Tempat Menarik
:nth-childiterasi melalui elemen mulai dari atas urutan sumber. Satu-satunya perbedaan antara itu dan:nth-last-childadalah bahwa yang terakhir melakukan iterasi melalui elemen-elemen yang dimulai dari bagian bawah urutan sumber.- Sintaks untuk memilih
nnomor pertama elemen agak kontra-intuitif. Anda mulai dengan-n, ditambah jumlah elemen positif yang ingin Anda pilih. Misalnya,li:nth-child(-n+3)akan memilih 3lielemen pertama . - The
:nth-childpemilih sangat mirip dengan:nth-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 pada.moduleelemen, 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 menunjukkan kekuatan:nth-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 |
|---|---|---|---|---|---|---|
| Apa saja | 3.2+ | Apa saja | 9,5+ | 9+ | Apa saja | Apa saja |
:nth-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.