CSS : محدد nth-of-type ()
مثال
حدد لون خلفية لكل عنصر <p> يمثل العنصر p الثاني لعنصره الرئيسي:
p:nth-of-type(2)
{
background: red;
}
المزيد من الأمثلة "جربها بنفسك" أدناه.
التعريف والاستخدام
المحدد يطابق كل عنصر هو العنصر n ، من نوع معين ، من العنصر الأصل.:nth-of-type(n)
يمكن أن تكون n رقمًا أو كلمة رئيسية أو صيغة.
تلميح: انظر إلى محدد : nth-child () لتحديد العنصر الذي يمثل الطفل n ، بغض النظر عن نوعه ، من العنصر الأصل.
الإصدار: | CSS3 |
---|
دعم المتصفح
تحدد الأرقام الواردة في الجدول إصدار المتصفح الأول الذي يدعم المحدِّد بشكل كامل.
Selector | |||||
---|---|---|---|---|---|
:nth-of-type() | 4.0 | 9.0 | 3.5 | 3.2 | 9.6 |
بنية CSS
:nth-of-type(number) {
css declarations;
}
مزيد من الأمثلة
مثال
الفردي والزوجي هي كلمات أساسية يمكن استخدامها لمطابقة العناصر الفرعية التي يكون فهرسها فرديًا أو زوجيًا (فهرس الطفل الأول هو 1).
هنا ، نحدد لونين مختلفين للخلفية للعناصر الفردية والزوجية:
p:nth-of-type(odd)
{
background: red;
}
p:nth-of-type(even)
{
background: blue;
}
مثال
باستخدام صيغة ( أ + ب ). الوصف: يمثل a حجم دورة ، ويمثل n عدادًا (يبدأ من 0) ، ويمثل b قيمة إزاحة.
هنا ، نحدد لون الخلفية لجميع عناصر p التي يكون فهرسها من مضاعفات 3:
p:nth-of-type(3n+0)
{
background: red;
}