nth-of-type Sözde Sınıfı

nth-of-type sözde sınıfı, belirtilen türden n. eleman olan öğeyi seçer.

Yani, h2:nth-of-type(4) yazarsam - ebeveyndeki 4. h2 bulunacaktır (ebeveyndeki 4. eleman olan h2'yi bulan nth-child'tan farklı olarak).

Sözdizimi

seçici:nth-of-type(sayı | odd | even | ifade){

}

Değerler

Değer	Açıklama
sayı	`1`'den başlayan pozitif bir sayı. İlgilenilen öğenin numarasını belirtir. Öğe numaralandırması `1`'den başlar.
`odd`	Tek numaralı öğeler.
`even`	Çift numaralı öğeler.
ifade	N harfini kullanarak özel ifadeler oluşturulabilir; burada n, sıfırdan (birden değil) sonsuza kadar olan tüm tam sayıları temsil eder. Böylece, `2n` - tüm çift sayıları anlamına gelir (ikinciden başlayarak). Bu nasıl anlaşılır? `n` yerine sırayla `0` ve sonrasındaki sayılar konur: eğer n = 0 ise, 2n 0 verir - böyle bir öğe yoktur (öğe numaralandırması 1'den başlar), eğer n = 1 ise, 2n 2 verir - ikinci öğe, eğer n = 2 ise, 2n 4 verir - dördüncü öğe. 3n yazılırsa - bu her üçüncü öğe olacaktır (üçüncüden başlayarak), ve böyle devam eder.

Örnek

Ebeveyndeki 2. h2 olan h2'yi bulalım:

<div>
	<h2>başlık</h2>
	<p>paragraf</p>
	
	<h2>başlık</h2>
	<p>paragraf</p>
	
	<h2>başlık</h2>
	<p>paragraf</p>
</div>

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

Örnek

Tüm çift h2'leri bulalım:

<div>
	<h2>başlık</h2>
	<p>paragraf</p>
	
	<h2>başlık</h2>
	<p>paragraf</p>
	
	<h2>başlık</h2>
	<p>paragraf</p>
	
	<h2>başlık</h2>
	<p>paragraf</p>
	
	<h2>başlık</h2>
	<p>paragraf</p>
</div>

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

Örnek

Tüm tek h2'leri bulalım:

<div>
	<h2>başlık</h2>
	<p>paragraf</p>
	
	<h2>başlık</h2>
	<p>paragraf</p>
	
	<h2>başlık</h2>
	<p>paragraf</p>
	
	<h2>başlık</h2>
	<p>paragraf</p>
	
	<h2>başlık</h2>
	<p>paragraf</p>
</div>

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