last-child یک pseudo-class می باشد که عنصری که آخرین فرزند یک عنصر دیگر است را انتخاب می کند.

ادامه مطلب

 

فرض کنید HTML به صورت زیر است:

<article>
 <p></p>
 <p></p>
 <p></p>
 <p>فرزند آخر عنصر مقاله</p>
</article>

در اینجا آخرین عنصر پاراگراف (تگ p) آخرین فرزند عنصر article می باشد. پس استایل زیر بر روی آن اعمال می شود:

p:last-child {
  color: green;
}

اما کد بالا بر روی HTML زیر اعمال نمی شود و آخرین پاراگراف سبز نمی شود. چون عنصر پاراگراف در سطح خود آخرین فرزند نمی باشد بلکه این عنصر ul است که آخرین فرزند در آن سطح است.

<article>
 <p></p>
 <p></p>
 <p></p>
 <p>آخرین پاراگراف</p>
 <ul>آخرین فرزند</ul>
</article>

درست است که پاراگراف آخرین عنصر سطح نیست ولی آخرین عنصر در نوع خودش در آن سطح هست پس برای انتخاب آن می توان از last-of-type: استفاده کرد.

مثال زیر را برای درک بهتر بررسی کنید:

 

 

پشتیبانی مرورگرها

first-child: در مرورگرهای کروم, فایرفاکس,سافاری, اپرا +9.5 و اینترنت اکسپلورر +9 و همچنین در اندروید و iOS کار می کند.