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

Bu sözde sınıf :nth-child sözde sınıfının yaptığı her şeyi aynen yapmaktadır. Farklı olarak ise, nth-child farklı tiplerde doğru sonuç vermezken, bu sözde sınıf ile bunu yapmak mümkün. Yani;

Şöyle bir html yapımız olsaydı;

<div>div etiketi</div>
<div>div etiketi</div>
<p>p etiketi</p>
<div>div etiketi</div>

Editörde Görüntüle

nth-child sözde sınıfı ile, şu şekilde seçip işlem yapamazdık çünkü 3. sırada <div> etiketi yerine <p> etiketi var.

div:nth-child(3) {
    background-color: lime;
}

Ancak bunu nth-of-type sözde sıınıfı ile yaparsak işler değişir.

div:nth-of-type(3) {
    background-color: lime;
}

Bu şekilde sonuç şöyle olacaktır;

div etiketi

p etiketi

div etiketi

Yani burada seçme işleminde tipe bakıyor. Eğer bir grup içerisinde seçtiğim tipten varsa o zaman seçme işlemi yapıyor.