مزيد من التحكم في تحديدات :nth-child() باستخدام بناء جملة S

يمكنك إجراء فلترة مسبقة لمجموعة من العناصر الفرعية قبل تطبيق منطق An+B عليها.

Bramus

أدوات اختيار الفئة الزائفة :nth-child() و:nth-last-child()

باستخدام أداة اختيار الفئة الزائفة :nth-child()، يمكن اختيار العناصر في نموذج العناصر في المستند (DOM) حسب الفهرس. باستخدام An+B microsyntax، يمكنك التحكّم بدقة في العناصر التي تريد تحديدها.

• :nth-child(2): اختَر الطفل الثاني.
• :nth-child(2n): لاختيار جميع العناصر الفرعية الزوجية (الثاني والرابع والسادس والثامن وما إلى ذلك)
• :nth-child(2n+1): اختَر جميع العناصر الفرعية ذات الأرقام الفردية (الأول والثالث والخامس والسابع وما إلى ذلك).
• :nth-child(5n+1): اختيار العنصر الفرعي الأول (=(5×0)+1) والسادس (=(5×1)+1) والحادي عشر (=(5×2)+1) وما إلى ذلك
• :nth-child(5n+2): اختيار العنصر الفرعي الثاني (=(5×0)+2) والسابع (=(5×1)+2) والثاني عشر (=(5×2)+2) وما إلى ذلك

ولكن يمكنك إجراء المزيد من عمليات اختيار التصميمات إذا حذفت المَعلمة A. على سبيل المثال:

• :nth-child(n+3): يختار كل عنصر فرعي بدءًا من العنصر الثالث (الثالث والرابع والخامس وما إلى ذلك).
• :nth-child(-n+5): يحدّد كل عنصر فرعي حتى العنصر الخامس (الأول والثاني والثالث والرابع والخامس).

يمكنك الجمع بين بعض عمليات التحديد :nth-child() هذه لتحديد نطاقات من العناصر:

• ‫:nth-child(n+3):nth-child(-n+5): اختيار كل عنصر فرعي من العنصر الثالث إلى العنصر الخامس (الثالث والرابع والخامس)

باستخدام :nth-last-child()، يمكنك إجراء عمليات اختيار مشابهة، ولكن بدلاً من بدء العدّ من البداية، يمكنك البدء من النهاية.

اختيارات التصفية المسبقة باستخدام بنية of S

تتيح لك الميزة الجديدة في مستوى 4 من أدوات اختيار لغة CSS إمكانية تمرير قائمة أدوات اختيار بشكل اختياري إلى :nth-child() و:nth-last-child().

:nth-child(An+B [of S]?)
:nth-last-child(An+B [of S]?)

عند تحديد of S، لا يتم تطبيق منطق An+B إلا على العناصر التي تتطابق مع قائمة المحددات S المحدّدة. يعني هذا بشكل أساسي أنّه يمكنك فلترة الأطفال مسبقًا قبل أن يبدأ An+B عمله.

أمثلة

على سبيل المثال، يختار :nth-child(2 of .highlight) العنصر الثاني المطابق الذي يحتوي على الفئة .highlight. بعبارة أخرى: من بين جميع العناصر الفرعية التي تحمل الفئة .highlight، اختَر العنصر الثاني.

يختلف ذلك عن .highlight:nth-child(2) الذي يختار العنصر الذي يتضمّن الفئة .highlight و هو أيضًا العنصر الفرعي الثاني.

يمكنك الاطّلاع على هذا الاختلاف في العرض التوضيحي أدناه:

• يحتوي العنصر الذي يتطابق مع :nth-child(2 of .highlight) على مخطط باللون الوردي.
• يحتوي العنصر الذي يتطابق مع .highlight:nth-child(2) على مخطط باللون الأخضر.

يُرجى العِلم أنّ S هي قائمة أدوات اختيار، ما يعني أنّها تقبل أدوات اختيار متعدّدة مفصولة بفاصلة. على سبيل المثال، يختار :nth-child(4 of .highlight, .sale) العنصر الرابع الذي يكون إما .highlight أو .sale من مجموعة عناصر ذات مستوى التسلسل الهرمي نفسه.

في العرض التوضيحي أدناه، تم تطبيق مخطط تفصيلي باللون البرتقالي على العنصر الذي يتطابق مع :nth-child(4 of .highlight, .sale).

إعادة النظر في تصميم الخطوط المتناوبة

من الأمثلة الكلاسيكية على استخدام :nth-child() إنشاء جدول مخطط. وهي تقنية مرئية يتم فيها تبديل الألوان في كل صف من صفوف الجدول. عادةً، يتم التعامل مع هذا الأمر على النحو التالي:

tr:nth-child(even) {
  background-color: lightgrey;
}

على الرغم من أنّ هذا الإجراء يعمل بشكل جيد مع الجداول الثابتة، إلا أنّه يصبح إشكاليًا عند البدء في فلترة محتويات الجدول بشكل ديناميكي. عند إخفاء الصف الثاني مثلاً، سيظهر الصفان الأول والثالث، ويكون لكل منهما لون الخلفية نفسه.

لإصلاح ذلك، يمكننا الاستفادة من :nth-child(An+B [of S]?) من خلال استبعاد الصفوف المخفية من منطق An+B:

tr:nth-child(even of :not([hidden])) {
  background-color: lightgrey;
}

يبدو رائعًا، أليس كذلك؟

صورة من Markus Spiske على Unsplash