الفرق بين المراجعتين ل"CSS/:nth-last-child"

المراجعة الحالية بتاريخ 19:32، 24 أكتوبر 2018

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

هذا المُحدِّد يُحدِّد جميع العناصر التي ترتيبها هو الرابع ضمن أي مجموعة من الأخوة، ويبدأ العد من آخر عنصر في المجموعة:

:nth-last-child(4n) {
  color: lime;
}

ملاحظة: هذا الصنف الزائف يماثل الصنف ‎:nth-child إلا أنه يبدأ عدّ العناصر من النهاية إلى البداية، عكس الصنف ‎:nth-child الذي يبدأ العد من البداية إلى النهاية.

يقبل هذا الصنف الزائف وسيطًا واحدًا يمُثِّل نمط مُطابقة العناصر:

الكلمة المحجوزة odd تُمثِّل العناصر التي يكون ترتيبها بين إخوتها فرديًا، أي 1 و 3 و 5 ...إلخ. ويبدأ العد من البداية إلى النهاية.
الكلمة المحجوزة even تُمثِّل العناصر التي يكون ترتيبها بين إخوتها زوجيًا، أي 2 و 4 و 6 ...إلخ. ويبدأ العد من البداية إلى النهاية.
الشكل <An+B> يُمثِّل العناصر التي لها ترتيبٌ رقميٌ بين أخوتها يُطابِق النمط An+B، وذلك لكل قيمة موجبة أو تساوي الصفر للمتغير n؛ لاحظ أنَّ فهرس أوّل عنصر هو 1، ويجب أن تكون قيمة A و B عدديةً <integer>. ويبدأ العد من البداية إلى النهاية.

:nth-last-child( <nth> )

حيث:

<nth> = <an-plus-b> | even | odd

أمثلة

المُحدِّد ‎tr:nth-last-child(odd)‎ أو tr:nth-last-child(2n+1)‎‎ يمثِّل الأسطر الفردية في جدول HTML، أي 1 و 3 و 5 ...إلخ. ويبدأ العد من البداية إلى النهاية.
المُحدِّد ‎‎tr:nth-last-child(even‎)‎‎ أو ‎‎‎‎tr:nth-last-child(2n‎)‎ يمثِّل الأسطر الزوجية في جدول HTML، أي 2 و 4 و 6 ...إلخ. ويبدأ العد من البداية إلى النهاية.
المُحدِّد ‎:nth-last-child(5n)‎ يمثِّل العناصر التي ترتيبها من مضاعفات العدد 5، أي 5 و 10 و 15 ...إلخ. ويبدأ العد من البداية إلى النهاية.
المُحدِّد ‎:nth-last-child(3n+4)‎ يمثِّل العناصر التي ترتيبها يخضع للسلسة 4 و 7 و 10 و 13 ...إلخ. ويبدأ العد من البداية إلى النهاية.
المُحدِّد ‎:nth-last-child(-n+3)‎ يمثِّل آخر ثلاثة عناصر.
المُحدِّد p:nth-last-child(n)‎‎ يمثِّل جميع عناصر <p> وهو يكافئ المُحدِّد البسيط p.
المُحدِّد p:nth-last-child(1)‎‎ أو ‎p:nth-last-child(0n+1)‎ يمثِّل أوّل عنصر <p> بين أخوته ويبدأ العد من البداية إلى النهاية، وهو يكافئ المُحدِّد ‎:last-child.

لاحظ كيف استخدمنا الصنف الزائف ‎:nth-last-child()‎ في المثال الآتي:

<table>
  <tbody>
    <tr>
      <td>السطر الأول</td>
    </tr>
    <tr>
      <td>السطر الثاني</td>
    </tr>
    <tr>
      <td>السطر الثالث</td>
    </tr>
    <tr>
      <td>السطر الرابع</td>
    </tr>
    <tr>
      <td>السطر الخامس</td>
    </tr>
  </tbody>
</table>

شيفرة CSS:

table {
  border: 1px solid blue;
}

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

دعم المتصفحات

الميزة	Chrome	Firefox	Internet Explorer	Opera	Safari
الدعم الأساسي	4.0	3.5	9.0	9.5	3.1
عدم الحاجة إلى وجود عنصر أب	57	51	؟	44	؟

انظر أيضًا

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

مصادر ومواصفات

مسودة Selectors Level 4.
مواصفة Selectors Level 3.

@@ سطر 31: / سطر 31: @@
    <tbody>
      <tr>
-       <td>First line</td>
+       <td>السطر الأول</td>
      </tr>
      <tr>
-       <td>Second line</td>
+       <td>السطر الثاني</td>
      </tr>
      <tr>
-       <td>Third line</td>
+       <td>السطر الثالث</td>
      </tr>
      <tr>
-       <td>Fourth line</td>
+       <td>السطر الرابع</td>
      </tr>
      <tr>
-       <td>Fifth line</td>
+       <td>السطر الخامس</td>
      </tr>
    </tbody>
@@ سطر 81: / سطر 81: @@
 |}
-==مصادر ومواصفات==
+==انظر أيضًا==
+* صفحة الصنف الزائف <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].