Pseudo-kelas :nth-of-type() CSS

Definisi dan Penggunaan

CSS :nth-of-type(n) Pseudo-kelas digunakan untuk mencocokkan elemen yang sama jenisnya (nama tag) di dalam elemen induk. n elemen, masing-masing elemen.

n Bisa berupa angka/indeks, kata kunci (ganjil atau genap) atau formula (seperti an + b)

Petunjuk:Lihat :nth-child() Pseudo-kelas untuk memilih elemen ke- n elemen, tanpa menghiraukan jenisnya.

Contoh

Contoh 1

Cara penggunaan :nth-of-type() Pemilih:

/* Pilih elemen kedua di antara saudara div */
div:nth-of-type(2) {
  background: merah;
}
/* Pilih elemen li kedua di dalam daftar */
li:nth-of-type(2) {
  background: hijau muda;
}
/* Pilih setiap elemen ketiga di dalam grup saudara */
:nth-of-type(3) {
  background: kuning;
}

Coba sendiri

Contoh 2

ganjil dan genap Adalah kata kunci, yang dapat digunakan untuk mencocokkan elemen dengan indeks genap atau ganjil (indeks elemen pertama adalah 1).

Di sini, kami menentukan warna latar yang berbeda untuk elemen <p> dengan indeks genap dan ganjil:

p:nth-of-type(ganjil) {
  background: merah;
}
p:nth-of-type(genap) {
  background: biru;
}

Coba sendiri

Contoh 3

Dengan formula (an + b) Deskripsi:a Menunjukkan penggeser bilangan bulat, n adalah semua bilangan bulat nonnegatif yang mulai dari 0,b Adalah penggeser bilangan bulat.

Di sini, kami menentukan warna latar untuk semua elemen <p> yang indeksnya adalah kelipatan 3 (yang akan memilih elemen ketiga, enam, sembilan, dll):

p:nth-of-type(3n+0) {
  background: merah;
}

Coba sendiri

Contoh 4

Di sini, kami menentukan warna latar untuk semua elemen <p> yang indeksnya adalah kelipatan 3. kemudian kami mengurangi 1 (yang akan memilih elemen kedua, kelima, delapan, dll):

p:nth-of-type(3n-1) {
  background: merah;
}

Coba sendiri

Syarat CSS

:nth-of-type(index | ganjil | genap | an+b) {
  deklarasi css;
}

Detil teknis

Dukungan browser

Angka di tabel menunjukkan versi pertama browser yang mendukung pseudo-kelas ini.