CSS : tipe ke-n() Pemilih
Contoh
Tentukan warna latar belakang untuk setiap elemen <p> yang merupakan elemen p kedua dari induknya:
p:nth-of-type(2)
{
background: red;
}
Lebih banyak contoh "Coba Sendiri" di bawah ini.
Definisi dan Penggunaan
Selektor cocok dengan setiap elemen yang merupakan anak ke- n , dari tipe tertentu, dari induknya.:nth-of-type(n)
n dapat berupa angka, kata kunci, atau rumus.
Tip: Lihat selektor :nth-child() untuk memilih elemen yang merupakan anak ke- n , apa pun tipenya , dari induknya.
Versi: kapan: | CSS3 |
---|
Dukungan Peramban
Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung pemilih.
Selector | |||||
---|---|---|---|---|---|
:nth-of-type() | 4.0 | 9.0 | 3.5 | 3.2 | 9.6 |
Sintaks CSS
:nth-of-type(number) {
css declarations;
}
Lebih Banyak Contoh
Contoh
Ganjil dan Genap adalah kata kunci yang dapat digunakan untuk mencocokkan elemen anak yang indeksnya ganjil atau genap (indeks anak pertama adalah 1).
Di sini, kami menentukan dua warna latar belakang yang berbeda untuk elemen p ganjil dan genap:
p:nth-of-type(odd)
{
background: red;
}
p:nth-of-type(even)
{
background: blue;
}
Contoh
Menggunakan rumus ( an + b ). Deskripsi: a mewakili ukuran siklus, n adalah penghitung (dimulai dari 0), dan b adalah nilai offset.
Di sini, kami menentukan warna latar belakang untuk semua elemen p yang indeksnya merupakan kelipatan 3:
p:nth-of-type(3n+0)
{
background: red;
}