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

:first-child sözde sınıfının yapamadığı şey, ilk eleman seçtiğimiz etiket değilse seçemiyordu. İşte bu durumda kullanılacak olan bu sözde sınıfdır. Örnek vermek gerekirse;

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

<style>
div:first-child {
    background-color: lime;
}
</style>

Editörde Görüntüle

Yukarıdaki CSS işlemi geçerli olmayacaktır çünkü ilk elemanımız div etiketi yerine p etiketidir. Fakat burada direk tipe bakarak işlem yaptırmış olsaydık, yani şöyle;

div:first-of-type {
    background-color: lime;
}

Sonuç başarılı olacaktı;

paragraf etiketi

div etiketi

Yani burada önemli olan seçtiğimiz tipte bir etiketin olup olmadığı varsa onun ilk elemanını seçip stil işlemi uygulayabiliyoruz.