42. الفئات الزائفة: محددات الأطفال الهيكلية

تسمح لك الفئات الزائفة الهيكلية بتحديد العناصر بناءً على موضعها داخل الحاوية الأب، حتى لو لم يكن لديها فئة (class) أو معرف (ID) فريد.

1. :first-child و :last-child

تحدد العنصر الأول أو الأخير ضمن مجموعة من الإخوة.

html

• العنصر الأول
• العنصر الثاني
• العنصر الأخير

css li:first-child { font-weight: bold; /* يستهدف li 'العنصر الأول' */ }

li:last-child { border-bottom: none; /* يستخدم غالباً لإزالة الحدود/الهوامش من العنصر الأخير */ }

2. :nth-child(n)

هذا هو المحدد الهيكلي الأقوى. يحدد العناصر بناءً على نمط رقمي حيث يبدأ n من 0 أو 1.

استهداف عناصر محددة

• li:nth-child(3): يحدد عنصر القائمة الثالث.

استهداف الصفوف الفردية/الزوجية (الخطوط)

• li:nth-child(odd) (فردي)
• li:nth-child(even) (زوجي)

css /* تخطيط مخطط للجداول أو القوائم */ .data-row:nth-child(even) { background-color: #eee; }

استهداف كل عنصر ن (صيغ رياضية)

يمكنك استخدام الصيغة An + B حيث A هو حجم الدورة، و B هو الإزاحة.

• li:nth-child(3n): يحدد الثالث، السادس، التاسع، إلخ.
• li:nth-child(3n + 1): يحدد الأول، الرابع، السابع، إلخ.