الصنف ‎:nth-child()‎

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

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

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

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

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

:nth-child( <nth> )

حيث:

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

أمثلة

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

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

<h3><code>span:nth-child(2n+1)</code>, WITHOUT an
   <code>&lt;em&gt;</code> among the child elements.</h3>
<div class="first">
  <span>Span 1!</span>
  <span>Span 2</span>
  <span>Span 3!</span>
  <span>Span 4</span>
  <span>Span 5!</span>
  <span>Span 6</span>
  <span>Span 7!</span>
</div>

<br>

<h3><code>span:nth-child(2n+1)</code>, WITH an
   <code>&lt;em&gt;</code> among the child elements.</h3>
<div class="second">
  <span>Span!</span>
  <span>Span</span>
  <em>This is an `em`.</em>
  <span>Span</span>
  <span>Span!</span>
  <span>Span</span>
  <span>Span!</span>
  <span>Span</span>
</div>

<br>

<h3><code>span:nth-of-type(2n+1)</code>, WITH an
   <code>&lt;em&gt;</code> among the child elements.</h3>
<div class="third">
  <span>Span!</span>
  <span>Span</span>
  <em>This is an `em`.</em>
  <span>Span!</span>
  <span>Span</span>
  <span>Span!</span>
  <span>Span</span>
  <span>Span!</span>
</div>

شيفرة CSS:

span,
div em {
  padding: 5px;
  border: 1px solid green;
  display: inline-block;
  margin-bottom: 3px;
}

.first span:nth-child(2n+1),
.second span:nth-child(2n+1),
.third span:nth-of-type(2n+1) {
  background-color: lime;
}

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

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

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

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