nth هل صادفك مرة تصميم لقائمة تريد أن تغير ألوان عناصرها بحسب ترتيبها سواء أكان للعناصر الفردية أو الزوجية ؟ هل صادفك مرة تصميم لقائمة تريد أن تغير ألوان عناصرها بداية من العنصر الثاني أو الثالث ؟ إن صدافك ذلك سابقاً فمن الجائز أنك إستخدمت كلاس وقمت بتكراره في العناصر التي تريد عمل التأثير عليها .. على كل حال ، حتى لا أطيل عليك الأمر أصبح سهلاً باستخدام :nth لنفترض أن لديك قائمة مكونة من 10 روابط وتريد أن تغير ألوان الراوبط حسب ترتيبها الفردي في القائمة : بكل بساطة ستقوم بإضافة الكود التالي في ملف الـ css الخاص بموقعك
nav a:nth-child(odd) {
color: white;
background-color: gray;
}
شرح الكود بالأعلى : السطر الأول من الكود يقم باختيار جميع العناصر ذات الترتيب الفردي odd من القائمة nav ومن ثم تغيير لون الروابط المختارة إلى أبيض وخلفية الروابط إلى رمادي وفي حال الرغبة في اختيار الروابط ذات الترتيب الزوجي في القائمة نقم بتغيير odd إلى even ليصبح مثل الكود التالي
nav a:nth-child(even) {
color: white;
background-color: gray;
}
أتمنى أن تكون الأكواد سهلة ، والآن ماذا لو أردت اختيار عنصر معين من القائمة الأمر بسيط ، لنفترض أننا نريد اختيار الرابط السابع من القائمة لإضافة التأثير عليه ، كل ما عليك هو استبدال odd او even بالرقم 7 ، ليصبح الكود كالتالي :
nav a:nth-child(7) {
color: white;
background-color: gray;
}
ولنفترض الآن أنك تريد عمل تأثير ما على جميع الروابط بالقائمة عدا الرابط الأول ، سيصبح الكود كالتالي :
nav a:nth-child(1n+2) {
color: white;
background-color: #F60;
}
شرح الكود السابق : الرقم 2 يعني أن يتم تطبيق التأثير بداية من العنصر او الرابط الثاني - أي تخطي أول رابط وإبدأ من الثاني - 1n تعني أن يتم تطبيق التأثير على كل العناصر التالية وإذا أصبح 2n فسوف يتم تطبيق التأثير كل عنصرين ... أي يتم التطبيق على عنصر واهمال التالي له ثم تطبق على الذي يليه وإهمال التالي له ... ولفهم الكود إليك بعض النماذج :
2n, 2n+0 or even = 2, 4, 6, 8, 10, 12,...
2n+1 or odd = 1, 3, 5, 7, 9, 11, ...
2n+2 = 2, 4, 6, 8, 10, 12, ...
2n+3 = 3, 5, 7, 9, 11, 12, ...
2n+4 = 4, 6, 8, 10, 12, 14, ...
3n, 3n+0 or 3n+3 = 3, 6, 9, 12, 15, 18, ...
3n+1 = 1, 4, 7, 10, 13, 16, ...
الآن ، الفرق بين :nth-child و :nth-of-type لنفترض أن لديك العناصر التالية في ذيل الصفحة الـ footer
<footer>
<h2>اختيار النص الثاني</h2>
<p>النص الأول</p>
<p>النص الثاني</p>
</footer>
والآن نريد أن نغير خلفية النص الثاني
لاحظ أن عنصر الفووتر يحتوي على نوعين نت العناصر h2 ، p
في هذه الحالة لابد من استخدام :nth-of-type لأننا نريد التأثير على نوع من العناصر وهو p ، فيكون كود الـ css كالتالي :
footer p:nth-of-type(2) {
background:#09C
}
لمشاهدة تطبيق على الأكواد اضغط هنا لتحميل التطبيق على الأكواد اضغط هنا أتمنى لكم الفائدة :)



أخبارتصميم مواقع انترنتحيل وأفكار cssمقالاتي


مواضيع قد تعجبك



أضرار مواقع التواصل الإجتماعي

أضرار مواقع التواصل الإجتماعي ثلاثة مليارات ، هو عدد الأشخاص حول العالم الذين يستخدمون...

أخبارأخبار وتحديثاتمقالاتي تابع القراءة
3d-sample3
خلال أيام … جار تحديث المدونة

السلام عليكم زوار موقعي المتواضع ...أستعد خلال أيام لتدشين القالب الجديد للمدونة بعد الإنشغال...

أخبارأخبار وتحديثاتمقالاتي تابع القراءة
ووردبريس – إضافة الصورة البارزة لجدول التدوينات بلوحة التحكم

أمر ممل حقاً أن تكون مضطرا لفتح كل تدوينة لتعرف الصورة البارزة الخاصة بها...

أخبارمقالاتيووردبريس تابع القراءة
-->