شبه کلاس ()nth-last-child: در CSS

:nth-last-child() Pseudo-class

شبه کلاس ()nth-last-child: در CSS عناصری از گروه عناصر خویشاوند را بر حسب موقعیت آنها در گروه هدف قرار میدهد. مبدا شمارش از انتها می باشد.

/* مضرب چهارم عناصر خویشاوند را
   هدف قرار میدهد و از آخر شروع می کند */
:nth-last-child(4n) {
  color: lime;
}

نکته: این شبه کلاس مانند ()nth-child: عمل می کند، با این تفات که از پایان شروع به شمارش و انتخاب عناصر می کند.

شبه کلاس ()nth-last-child: تنها یک متغییر می پذیرد و بر حسب آن موقعیت عنصر مورد نظر را هدف قرار می دهد. مبنای موقعیت از شماره 1 شروع می شود و از آخر گروه عناصر خویشاوند آغاز می کند.

مقادیر با کلمات کلیدی

 odd​ عناصری را که موقعیت آنها در گروه عناصر خویشاوند فرد باشد را انتخاب می کند.

/*  اعضا فرد گروه خویشاوند را انتخاب می کند */
div:nth-last-child(odd) {
   color: blue;
}

even​  عناصری را که موقعیت آنها در گروه عناصر خویشاوند زوج باشد را انتخاب می کند.

/*  اعضا زوج گروه خویشاوند را انتخاب می کند */
div:nth-last-child(odd) {
   color: blue;
}

در مثال زیر نحوه عملکرد این سودو کلاس را در یک جدول میبینیم:

html

<table>
    <tr>
        <td>یک متن نونه</td>
    </tr>
    <tr>
        <td>یک متن نونه</td>
    </tr>
    <tr>
        <td>یک متن نونه</td>
    </tr>
    <tr>
        <td>یک متن نونه</td>
    </tr>
    <tr>
        <td>یک متن نونه</td>
    </tr>
</table>

css

tr:nth-last-child(1) {
    background: red;
    color: #fff;
}
tr:nth-last-child(n + 4) {
    background-color: dodgerblue;
    color: yellow;
}

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

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