إجراء فلترة مسبقة لمجموعة من العناصر الفرعية قبل تطبيق منطق An+B عليها
أداة الاختيار من الفئة :nth-child() و:nth-last-child()
باستخدام أداة الاختيار من الفئة الزائفة :nth-child()، من الممكن اختيار العناصر في نموذج العناصر في المستند (DOM) حسب الفهرس. باستخدام البنية الدقيقة An+B يمكنك التحكم بشكل جيد في العناصر التي تريد تحديدها.
: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
الجديد في أدوات اختيار لغة CSS المستوى 4 هو إمكانية نقل قائمة محدّدات اختياري إلى :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 بتنفيذ هذه الخطوة.
دعم المتصفح
- 111
- 111
- 113
- 9
أمثلة
على سبيل المثال، تختار السمة :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;
}
رائع جدًا، أليس كذلك؟
تصوير ماركوس سبيسك على قناة Unsplash