الصنف :nth-of-type()

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

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

p:nth-of-type(4n) {
  color: lime;
}

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

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

:nth-of-type( <nth> )

حيث:

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

أمثلة

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

<div>
  <div>This element isn't counted.</div>
  <p>First paragraph. (left aligned)</p>
  <p>Second paragraph. (right aligned)</p>
  <div>This element isn't counted.</div>
  <p>Third paragraph. (left aligned)</p>
</div>

شيفرة CSS:

p:nth-of-type(2n+1) {
  text-align: left;
}

p:nth-of-type(2n) {
  text-align: right;
}

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

الميزة	Chrome	Firefox	Internet Explorer	Opera	Safari
الدعم الأساسي	1.0	3.5	9.0	9.5	3.1

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

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