CSS :first-child Sözde Sınıfı

İlk çocuk etiketi bulmak için bu sözde sınıf kullanılır. Bu sözde sınıf kullanılan etiketin mutlaka bir ebeveyn etiketi olmak zorundadır. Örneğin;

<ul>
    <li>liste</li>
    <li>liste</li>
    <li>liste</li>
    <li>liste</li>
</ul>
<style>
ul li:first-child {
    background-color: lime;
}
</style>

Editörde Görüntüle

Bu kod ile ilk <li> etiketi seçilerek stil işlemi uygulanır. Çünkü li etiketinin ebeveyn etiketi <ul> etiketidir.

liste
liste
liste
liste

Farklı bir örneğe bakalım, örneğin şöyle bir html yapımız olsun;

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

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

Editörde Görüntüle

İlk div etiketini yine seçecektir. Çünkü ebeveyn etiketi olmasa bile bu etiketlerin ebeveyni <body> etiketi kabul edilir.

div etiketi

Ancak bu örneği şöyle değiştirirsek, işlem başarısız olacaktır.

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

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

Editörde Görüntüle

Çünkü buradaki ilk div çocuk etiketini seçmek istiyoruz ancak ilk çocuk etiketi p etiketi olduğu için işlem geçerli olmuyor.

Ayrıca herhangi bir etiketin sonuna eklemeden de kullanabiliriz bu sözde sınıfı. Örneğin;

body :first-child {
    background-color: lime;
}

Burada body etiketinin ilk çocuk elemanı ne olursa olsun onu seçip stil işlemini uygulayacaktır.