Pseudo kelas nth-of-type

Pseudo kelas nth-of-type memilih elemen, yang merupakan keturunan ke-n bagi jenis yang ditentukan.

Maksudnya, jika saya tulis h2:nth-of-type(4) - ia akan mencari h2 yang ke-4 dalam elemen induk (berbeza dengan nth-child, yang hanya akan mencari h2 yang merupakan elemen ke-4 dalam elemen induk).

Sintaks

pemilih:nth-of-type(nombor | odd | even | ungkapan){

}

Nilai

Nilai	Penerangan
nombor	Nombor positif bermula dari `1`. Menentukan nombor elemen yang ingin kita sasarkan. Penomboran elemen bermula dari `1`.
`odd`	Elemen bernombor ganjil.
`even`	Elemen bernombor genap.
ungkapan	Boleh menyusun ungkapan khas dengan huruf n, yang mewakili semua integer dari sifar (bukan dari satu) hingga infiniti. Jadi, `2n` bermaksud semua nombor genap (bermula dari yang kedua). Bagaimana untuk memahaminya? Gantikan `n` secara berurutan dengan nombor dari `0` dan seterusnya: jika n = 0, maka 2n memberikan 0 - tiada elemen sedemikian (penomboran elemen bermula dari 1), jika n = 1, maka 2n memberikan 2 - elemen kedua, jika n = 2, 2n memberikan 4 - elemen keempat. Jika ditulis 3n - ia akan menjadi setiap elemen ketiga (bermula dari yang ketiga), dan seterusnya.

Contoh

Cari h2 yang merupakan h2 yang ke-2 dalam elemen induk:

<div>
	<h2>tajuk</h2>
	<p>perenggan</p>
	
	<h2>tajuk</h2>
	<p>perenggan</p>
	
	<h2>tajuk</h2>
	<p>perenggan</p>
</div>

h2:nth-of-type(2) {
	color: red;
}

Contoh

Cari semua h2 bernombor genap:

<div>
	<h2>tajuk</h2>
	<p>perenggan</p>
	
	<h2>tajuk</h2>
	<p>perenggan</p>
	
	<h2>tajuk</h2>
	<p>perenggan</p>
	
	<h2>tajuk</h2>
	<p>perenggan</p>
	
	<h2>tajuk</h2>
	<p>perenggan</p>
</div>

h2:nth-of-type(even) {
	color: red;
}

Contoh

Cari semua h2 bernombor ganjil:

<div>
	<h2>tajuk</h2>
	<p>perenggan</p>
	
	<h2>tajuk</h2>
	<p>perenggan</p>
	
	<h2>tajuk</h2>
	<p>perenggan</p>
	
	<h2>tajuk</h2>
	<p>perenggan</p>
	
	<h2>tajuk</h2>
	<p>perenggan</p>
</div>

h2:nth-of-type(odd) {
	color: red;
}