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

من موسوعة حسوب
< CSS
نسخة 19:32، 24 أكتوبر 2018 للمستخدم Riyad-khalifeh (نقاش | مساهمات)
(فرق) → مراجعة أقدم | المراجعة الحالية (فرق) | مراجعة أحدث ← (فرق)
اذهب إلى: تصفح، ابحث

الصنف الزائف ‎: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 ؟

انظر أيضًا

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

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