: nth-of-type () adalah pemilih pseudo-kelas CSS yang memungkinkan Anda untuk memilih elemen dari tipe yang sama berdasarkan indeks (urutan sumber) di dalam wadah mereka (container).

Ini mirip dengan: nth-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, menggunakan argumen yang diteruskan ke: n-of-type (), ia memilih semua elemen array yang indeksnya cocok dengan nilai argumen. Misalnya, p: n-of-type (…) akan memfilter paragraf di dalam sebuah wadah, dan kemudian pilih yang cocok dengan nilai argumen: nth-of-type ().

Anda bisa memberikan angka positif sebagai argumen ke: nth-of-type (), yang akan memilih satu elemen yang indeksnya di dalam induknya cocok dengan argumen: nth-of-type (). Sebagai contoh, p: n-of-type (3) akan memilih paragraf dengan nilai indeks 3; yaitu, ia akan memilih paragraf ketiga di antara paragraf yang ada.

Anda juga dapat memasukkan salah satu dari dua kata kunci yang telah ditentukan: genap dan ganjil. p: n-of-type (datar) akan memilih semua paragraf daftar dengan nomor indeks genap (2, 4, 6, 8, dll.), dan p: n-of-type (ganjil) akan memilih semua paragraf dengan indeks ganjil angka (1, 3, 5, 7, dll.).

: nth-of-type () juga memungkinkan Anda untuk memilih satu atau lebih elemen menggunakan rumus (atau persamaan) β€”an + b β€” yang diteruskan sebagai argumen. Sintaksnya adalah: n-of-type (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,: tipe-n (3n + 1) akan memilih anak ke-1 (3 * 0 +1 = 1), anak ke-4 (3 * 1 +1 = 4), anak ke-7 (3 * 2 +1 = 7 ) anak, dll. dan seterusnya.

Apa yang dilakukan: n-of-type (an + b) adalah membagi anak-anak wadah menjadi elemen (kelompok terakhir mengambil sisanya), dan kemudian memilih elemen ke-b dari masing-masing kelompok. Jadi, p: n-of-type (3n +1) akan membagi jumlah paragraf menjadi 3 kelompok, menempatkan sisanya dalam kelompok keempat (jika jumlah paragraf tidak dibagi 3), dan kemudian akan cocok dengan item pertama di setiap grup.

Sebagai contoh, gambar berikut ini menunjukkan hasil pemilihan p: n-of-type (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. Kemudian, untuk masing-masing dari empat kelompok, paragraf pertama akan dipilih. Pada gambar berikut, paragraf yang cocok memiliki latar belakang biru.

Hasil penerapan: n-of-type (3n + 1) untuk memilih paragraf dalam wadah. Paragraf dikelompokkan ke dalam tiga kelompok, tidak termasuk elemen lain di antaranya. Kemudian, dari masing-masing kelompok, paragraf pertama dipilih dan diberi warna latar belakang biru.

 

WhatsApp chat