الصيغة :nth-child() من المقالات الوهمية CSS

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

CSS :nth-child(n)}} يُستخدم للتنسيق مع العنصر الذي يكون n العنصر من نوعه. الكائن الزائف

هذا الكائن الزائف يُستخدم للتنسيق مع العنصر بناءً على مؤشر العنصر في قائمة الأبناء للعنصر الأب

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

إشارة:أنظر :nth-of-type() الكائن الزائف يُستخدم لاختيار العنصر الذي يكوننفس النوع (اسم العنصر)من n العنصر الفريد من نوعه. العنصر

مثال

مثال 1

كيفية الاستخدام :nth-child() الكائن الزائف:

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

جرب بنفسك

مثال 2

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

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

p:nth-child(odd) {
  background-color: red;
}
p:nth-child(even) {
  background: lightgreen;
}

جرب بنفسك

مثال 3

استخدم المعادلة (an + b) شرح:a يعني إزاحة عددية، n هو جميع الأرقام غير السلبية البالغة من الصفرb هو إزاحة عددية.

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

p:nth-child(3n+1) {
  background-color: red;
}

جرب بنفسك

مثال 4

في هذا المكان، نحدد لون الخلفية لكل عنصر <p> الذي يكون نسبة العدد 3

p:nth-child(3n-1) {
  background-color: red;
}

جرب بنفسك

نحو الجملة CSS

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

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

دعم المتصفح

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