الصيغة المزيفة :nth-of-type() لـ CSS

تعريف والاستخدام

CSS :nth-of-type(n) المزيج المزيف يُستخدم لاختيار العنصر الذي يكون نسيانه كمعيار n العنصر الذي يكون نسيانه عنصرًا فرعيًا لأي نوع (اسم العنصر).

n يمكن أن يكون عددًا/مؤشرًا، كلمة مفتاحية (فرد أو زوجي) أو معادلة (مثل an + b)

نصيحة:أنظر :nth-child() المزيج المزيف يُستخدم لاختيار العنصر الذي يكون نسيانه كمعيار n العنصر الذي يكون نسيانه عنصرًا فرعيًا لأي نوع (اسم العنصر).

مثال

مثال 1

كيفية الاستخدام :nth-of-type() المعيار:

/* اختيار العنصر الثاني من الأشقاء div */
div:nth-of-type(2) {
  background: red;
}
/* اختيار العنصر li الثاني في القائمة */
li:nth-of-type(2) {
  background: lightgreen;
}
/* اختيار كل عنصر ثالث في مجموعة الأشقاء */
:nth-of-type(3) {
  background: yellow;
}

جرب بنفسك

مثال 2

فرد و زوجي هو كلمة مفتاحية يمكن استخدامها للتناسب مع العناصر التي تكون نسيانها زوجي أو فرد (نسيان العنصر الأول هو 1).

في هذا المكان، نحدد لون الخلفية لكل عنصر <p> الذي يكون نسيانه زوجي أو فرد:

p:nth-of-type(odd) {
  background: red;
}
p:nth-of-type(even) {
  background: blue;
}

جرب بنفسك

مثال 3

استخدام المعادلة (an + b)a يعني مقياس عددي، n هو جميع الأرقام اللازمة من 0.b هو مقياس عددي.

في هذا المكان، نحدد لون الخلفية لكل عنصر <p> الذي يكون نسيانه مضاعف لعدد 3 (سيتم اختيار الثالث، السادس، التاسع، إلخ):

p:nth-of-type(3n+0) {
  background: red;
}

جرب بنفسك

مثال 4

في هذا المكان، نحدد لون الخلفية لكل عنصر <p> الذي يكون نسيانه مضاعف لعدد 3. ثم نطرح 1 (سيتم اختيار الثاني، الخامس، الثامن، إلخ):

p:nth-of-type(3n-1) {
  background: red;
}

جرب بنفسك

نحو اللغة CSS

:nth-of-type(النسبة | زوجي | فرد | an+b) {
  تعريفات css;
}

تفاصيل التقنية

دعم المتصفح

الرقم في الجدول يشير إلى إصدار أول متصفح يدعم هذا المزيج المزيف.