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

Son ç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:last-child {
    background-color: lime;
}
</style>

Editörde Görüntüle

Bu kod ile son <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:last-child {
    background-color: orange;
}
</style>

Editörde Görüntüle

Son 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.

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

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

Editörde Görüntüle

Çünkü buradaki son div çocuk etiketini seçmek istiyoruz ancak son ç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 :last-child {
    background-color: lime;
}

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