CSS اضافة تأثيرات على العناصر بحسب أماكنها بدون كلاس أو آي دي :nth

كتب يوم : 21 يونيو 2013 - تصنيف : تصميم مواقع انترنت - مشاهدات 671

nth

هل صادفك مرة تصميم لقائمة تريد أن تغير ألوان عناصرها بحسب ترتيبها سواء أكان للعناصر الفردية أو الزوجية ؟ هل صادفك مرة تصميم لقائمة تريد أن تغير ألوان عناصرها بداية من العنصر الثاني أو الثالث ؟ إن صدافك ذلك سابقاً فمن الجائز أنك إستخدمت كلاس وقمت بتكراره في العناصر التي تريد عمل التأثير عليها .. على كل حال ، حتى لا أطيل عليك الأمر أصبح سهلاً باستخدام :nth لنفترض أن لديك قائمة مكونة من 10 روابط وتريد أن تغير ألوان الراوبط حسب ترتيبها الفردي في القائمة :

بكل بساطة ستقوم بإضافة الكود التالي في ملف الـ css الخاص بموقعك

شرح الكود بالأعلى : السطر الأول من الكود يقم باختيار جميع العناصر ذات الترتيب الفردي odd من القائمة nav ومن ثم تغيير لون الروابط المختارة إلى أبيض وخلفية الروابط إلى رمادي وفي حال الرغبة في اختيار الروابط ذات الترتيب الزوجي في القائمة نقم بتغيير odd إلى even ليصبح مثل الكود التالي

أتمنى أن تكون الأكواد سهلة ، والآن ماذا لو أردت اختيار عنصر معين من القائمة الأمر بسيط ، لنفترض أننا نريد اختيار الرابط السابع من القائمة لإضافة التأثير عليه ، كل ما عليك هو استبدال odd او even بالرقم 7 ، ليصبح الكود كالتالي :

ولنفترض الآن أنك تريد عمل تأثير ما على جميع الروابط بالقائمة عدا الرابط الأول ، سيصبح الكود كالتالي :

شرح الكود السابق : الرقم 2 يعني أن يتم تطبيق التأثير بداية من العنصر او الرابط الثاني – أي تخطي أول رابط وإبدأ من الثاني – 1n تعني أن يتم تطبيق التأثير على كل العناصر التالية وإذا أصبح 2n فسوف يتم تطبيق التأثير كل عنصرين … أي يتم التطبيق على عنصر واهمال التالي له ثم تطبق على الذي يليه وإهمال التالي له … ولفهم الكود إليك بعض النماذج :

الآن ، الفرق بين :nth-child و :nth-of-type

لنفترض أن لديك العناصر التالية في ذيل الصفحة الـ footer

والآن نريد أن نغير خلفية النص الثاني

لاحظ أن عنصر الفووتر يحتوي على نوعين نت العناصر h2 ، p

في هذه الحالة لابد من استخدام :nth-of-type لأننا نريد التأثير على نوع من العناصر وهو p ، فيكون كود الـ css كالتالي :

لمشاهدة تطبيق على الأكواد اضغط هنا

لتحميل التطبيق على الأكواد اضغط هنا

أتمنى لكم الفائدة 🙂

وسوم :

CSS nth
  • حلوة دي 🙂 أجربها الشغل الجاي إن شاء الله ^^

    • أهلا أخي محمد ، هي خاصية مفيدة فعلاً … تنفع كأنك عامل لووب كل عنصرين أو تلاتة أو أكتر كما تجده في رابط التطبيق … بالتوفيق أخي الكريم 🙂

  • noor_ali

    نجربها ان شاء الله 🙂