عرض مصدر CSS/:nth-last-child

<noinclude>{{DISPLAYTITLE: الصنف <code>‎:nth-last-child()</code>‎}}</noinclude>
الصنف الزائف <code>‎:nth-last-child()</code>‎ في CSS (أي pseudo-class) يُطابِق عنصرًا أو أكثر بناءً على موقعه ضمن مجموعة من العناصر الأخوة (siblings)، وذلك بدءًا من نهاية المجموعة. 

هذا المُحدِّد يُحدِّد جميع العناصر التي ترتيبها هو الرابع ضمن أي مجموعة من الأخوة، ويبدأ العد من آخر عنصر في المجموعة: <syntaxhighlight lang="css">
:nth-last-child(4n) {
  color: lime;
}
</syntaxhighlight>ملاحظة: هذا الصنف الزائف يماثل الصنف <code>[[CSS/:nth-child|‎:nth-child]]</code> إلا أنه يبدأ عدّ العناصر من النهاية إلى البداية، عكس الصنف <code>[[CSS/:nth-child|‎:nth-child]]</code> الذي يبدأ العد من البداية إلى النهاية.

يقبل هذا الصنف الزائف وسيطًا واحدًا يمُثِّل نمط مُطابقة العناصر:
* الكلمة المحجوزة <code>odd</code> تُمثِّل العناصر التي يكون ترتيبها بين إخوتها فرديًا، أي 1 و 3 و 5 ...إلخ. ويبدأ العد من البداية إلى النهاية.
* الكلمة المحجوزة <code>even</code> تُمثِّل العناصر التي يكون ترتيبها بين إخوتها زوجيًا، أي 2 و 4 و 6 ...إلخ. ويبدأ العد من البداية إلى النهاية.
* الشكل <code><An+B></code> يُمثِّل العناصر التي لها ترتيبٌ رقميٌ بين أخوتها يُطابِق النمط <code>An+B</code>، وذلك لكل قيمة موجبة أو تساوي الصفر للمتغير <code>n</code>؛ لاحظ أنَّ فهرس أوّل عنصر هو <code>1</code>، ويجب أن تكون قيمة <code>A</code> و <code>B</code> عدديةً <code>[[CSS/integer|<integer>]]</code>. ويبدأ العد من البداية إلى النهاية.
<syntaxhighlight lang="css">
:nth-last-child( <nth> )
</syntaxhighlight>حيث:<syntaxhighlight lang="css">
<nth> = <an-plus-b> | even | odd

</syntaxhighlight>

== أمثلة ==
* المُحدِّد <code>‎tr:nth-last-child(odd)</code>‎ أو <code>tr:nth-last-child(2n+1)</code>‎‎ يمثِّل الأسطر الفردية في جدول HTML، أي 1 و 3 و 5 ...إلخ. ويبدأ العد من البداية إلى النهاية.
* المُحدِّد <code>‎‎tr:nth-last-child(even‎)‎‎</code> أو <code>‎‎‎‎tr:nth-last-child(2n‎)</code>‎ يمثِّل الأسطر الزوجية في جدول HTML، أي 2 و 4 و 6 ...إلخ. ويبدأ العد من البداية إلى النهاية.
* المُحدِّد ‎<code>:nth-last-child(5n)</code>‎ يمثِّل العناصر التي ترتيبها من مضاعفات العدد 5، أي 5 و 10 و 15 ...إلخ. ويبدأ العد من البداية إلى النهاية.
* المُحدِّد ‎<code>:nth-last-child(3n+4)</code>‎ يمثِّل العناصر التي ترتيبها يخضع للسلسة 4 و 7 و 10 و 13 ...إلخ. ويبدأ العد من البداية إلى النهاية.
* المُحدِّد ‎<code>:nth-last-child(-n+3)‎</code> يمثِّل آخر ثلاثة عناصر.
* المُحدِّد <code>p:nth-last-child(n)‎‎</code> يمثِّل جميع عناصر <code>[[HTML/p|<nowiki><p></nowiki>]]</code> وهو يكافئ المُحدِّد البسيط p.
* المُحدِّد <code>p:nth-last-child(1)‎‎</code> أو <code>‎p:nth-last-child(0n+1)</code>‎ يمثِّل أوّل عنصر <code>[[HTML/p|<nowiki><p></nowiki>]]</code> بين أخوته ويبدأ العد من البداية إلى النهاية، وهو يكافئ المُحدِّد <code>[[CSS/:last-child|‎:last-child]]</code>.
لاحظ كيف استخدمنا الصنف الزائف <code>‎:nth-last-child()</code>‎ في المثال الآتي:<syntaxhighlight lang="html">
<table>
  <tbody>
    <tr>
      <td>السطر الأول</td>
    </tr>
    <tr>
      <td>السطر الثاني</td>
    </tr>
    <tr>
      <td>السطر الثالث</td>
    </tr>
    <tr>
      <td>السطر الرابع</td>
    </tr>
    <tr>
      <td>السطر الخامس</td>
    </tr>
  </tbody>
</table>
</syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css">
table {
  border: 1px solid blue;
}

tr:nth-last-child(-n+3) {
  background-color: pink;
}
</syntaxhighlight>

== دعم المتصفحات ==
{| class="wikitable"
!الميزة
!|Chrome
!Firefox
!Internet Explorer
!Opera
!Safari
|-
!الدعم الأساسي
|4.0
|3.5
|9.0
|9.5
|3.1
|-
!عدم الحاجة إلى وجود عنصر أب
|57
|51
|؟
|44
|؟
|}

==انظر أيضًا==
* صفحة الصنف الزائف <code>[[CSS/:first-child|first-child:]]</code> الذي يُمثِّل أوّل عنصر في مجموعة من العناصر الأخوة (sibling elements).
* صفحة الصنف الزائف <code>[[CSS/:last-child|last-child:]]</code> الذي يُمثِّل آخر عنصر في مجموعة من العناصر الأخوة (sibling elements).
* صفحة الصنف الزائف <code>[[CSS/:nth-of-type|nth-of-type:]]</code> الذي  يُطابِق عنصرًا أو أكثر من نوعٍ معيّن بناءً على موقعه ضمن مجموعة من العناصر الأخوة (siblings).

== مصادر ومواصفات ==
*مسودة [https://drafts.csswg.org/selectors-4/#nth-last-child-pseudo Selectors Level 4].
*مواصفة [https://drafts.csswg.org/selectors-3/#nth-last-child-pseudo Selectors Level 3].
[[تصنيف:CSS|{{SUBPAGENAME}}]]
[[تصنيف:CSS Selectors|{{SUBPAGENAME}}]]
[[تصنيف:CSS pseudo-class|{{SUBPAGENAME}}]]