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

من موسوعة حسوب
< CSS
اذهب إلى: تصفح، ابحث

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

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