باستخدام: nth-of-type (n) مع الجداول
لتسهيل قراءة الجداول ، يكون من المفيد غالبًا استخدام صفوف نمط ذات ألوان خلفية بديلة. إحدى الطرق الأكثر شيوعًا لجداول النمط هي تعيين لون الخلفية لكل صف آخر. وغالبًا ما يشار إليه باسم "خطوط زيبرا".
يمكنك تحقيق ذلك عن طريق تعيين كل صف آخر بفئة CSS ثم تحديد نمط تلك الفئة. هذا يعمل ولكن ليس الطريقة المثلى أو الأكثر فعالية للذهاب حول هذا الموضوع.
عند استخدام هذه الطريقة ، في كل مرة تحتاج فيها إلى تعديل هذا الجدول ، قد يتعين عليك تحرير كل صف واحد في الجدول للتأكد من أن كل صف متناسق مع التغييرات. على سبيل المثال ، إذا قمت بإدراج صف جديد في الجدول الخاص بك ، فإن كل صف آخر تحته يحتاج إلى تغيير الفصل.
CSS يجعل من السهل على جداول نمط مع خطوط الحمار الوحشي. لست بحاجة إلى إضافة أي سمات HTML أو فئات CSS إضافية ، فما عليك سوى استخدام: nth-of-type (n) CSS selector .
إن nth-of-type (n) selector عبارة عن فئة زائفة بنيوية في CSS تسمح لك بنمط العناصر على أساس علاقاتها مع عناصر الوالدين والأشقاء. يمكنك استخدامه لتحديد عنصر واحد أو أكثر استنادًا إلى ترتيب المصدر الخاص به. بمعنى آخر ، يمكن أن يتطابق مع كل عنصر هو الطفل الرابع لنوع معين من أصله.
يمكن أن يكون الحرف n عبارة عن كلمة أساسية (مثل فردية أو زوجية) أو رقم أو صيغة.
على سبيل المثال ، لوضع علامة على كل علامة فقرة أخرى بلون خلفية أصفر ، سيتضمن مستند CSS:
p: n-of-type (odd) {
الخلفية: أصفر.
}
ابدأ باستخدام جدول HTML الخاص بك
أولاً ، قم بإنشاء الجدول الخاص بك كما تكتب عادةً في HTML. لا تضيف أي فصول خاصة إلى الصفوف أو الأعمدة.
في ورقة الأنماط الخاصة بك ، أضف CSS التالية:
tr: nth-of-type (odd) {
لون الخلفية: #CCC.
}
سيؤدي ذلك إلى تنسيق كل صف آخر مع لون خلفية رمادية يبدأ من الصف الأول.
نمط الأعمدة بالتناوب بنفس الطريقة
يمكنك القيام بنفس النوع من التصميم للأعمدة في الجداول الخاصة بك. للقيام بذلك ، قم ببساطة بتغيير tr في صف CSS إلى td. فمثلا:
td: nth-of-type (odd) {
لون الخلفية: #CCC.
}
استخدام الصيغ في nth-of-type n (n)
إن صيغة الصيغة المستخدمة في المحدد هي + b.
هو رقم يمثل دورة أو حجم الفهرس.
n في الواقع الحرف "n" ويمثل عدادًا ، والذي يصدر عند 0.
+ هو مشغل ، والذي قد يكون أيضًا "-"
ب هو عدد صحيح ويمثل قيمة الإزاحة — على سبيل المثال ، عدد الصفوف لأسفل في حالة بدء المحدد في تطبيق لون الخلفية. هذا مطلوب إذا تم تضمين عامل في الصيغة.
على سبيل المثال ، إذا كنت تريد تعيين لون خلفية لكل صف ثالث ، ستكون الصيغة 3n + 0. قد يبدو CSS الخاص بك كما يلي:
tr: nth-of-type (3n + 0) {
الخلفية:
}
أدوات مفيدة لاستخدام محدد من نوع
إذا كنت تشعر بالضيق من جانب الصيغة باستخدام أداة تحديد نوع pseudo-class ، فجرّب موقع nth Tester كأداة مفيدة تساعدك على تحديد البنية لتحقيق المظهر الذي تريده. استخدم القائمة المنسدلة لتحديد n-of-type (يمكنك أيضًا تجربة فئات زائفة أخرى هنا ، مثل nth-child).