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: استفاده کرد.
مثال زیر را برای درک بهتر بررسی کنید:
See the Pen :last-child by Mojtaba Seyedi (@seyedi) on CodePen.
پشتیبانی مرورگرها
first-child: در مرورگرهای کروم, فایرفاکس,سافاری, اپرا +9.5 و اینترنت اکسپلورر +9 و همچنین در اندروید و iOS کار می کند.
سوال داری؟ برو به پنل پرسش و پاسخ