شبه کلاس last-of-type: در CSS

:last-of-type Pseudo-class

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

همانطور که مشخص است، عنصر انتخاب شده باید والد داشته باشد. در مثال زیر عملکرد این شبه کلاس را میبینیم:

html

<div>
    <h3>هدینگ ۱</h3>
    <h3>هدینگ ۲</h3>
    <h3>هدینگ ۳</h3>
    <p>پاراگراف ۱</p>
    <p>پاراگراف ۲</p>
    <p>پاراگراف ۳</p>
</div>

css

body {
    direction: rtl;
}
p:last-of-type,
h3:last-of-type {
    color: red;
}

مشاهده و ویرایش کد در حالت تمام صفحه

در مثال دیگری میبینیم که چگونه با یک فاصله خالی شبه کلاس last-of-type: به تمام عناصر زیرمجموعه اعمال شده و از هر نوع عنصر آخرین را هدف قرار می دهد.

html

<section>
    <h3>هدینگ اول</h3>
    <h3>هدینگ دوم</h3>
    <p>پاراگراف اول</p>
    <p>پاراگراف دوم</p>
    <p>پاراگراف سوم</p>
    <span>متن نمونه.</span>
    <span>متن نمونه.</span>
    <span>متن نمونه.</span>
</section>

css

body {
    direction: rtl;
}
section :last-of-type {
    background-color: red;
    color: #ffffff;
}

مشاهده و ویرایش کد در حالت تمام صفحه

پشتیبانی مرورگرها
تمام مرورگرها از این شبه کلاس در CSS پشتیبانی می کنند.