CSS, CSS

آموزش کامل nth-child در CSS3

تبلیغات
کانال تلگرام فتولیا
4 سوالی شهرداری

وقتی در مورد :nth-child یا :nth-of-type تحقیق می کردم تا یاد بگیرم چطور میشه از اونها به بهترین نحو استفاده کرد کمی گیج شدم . البته این دستور کلا کمی گیج کننده هست و در عین حال آسان .

در اینجا ما این دستور را به همراه شکل و کد به شما نمایش می دهیم تا به آسانی یاد بگیرید و در پروژه های بعدی تان از آن استفاده کنید

نکته : منظور ما از عنصر در این آموزش ، عناصر و تگ های HTML هستند 

فقط انتخاب عنصر پنجم

5

برای انتخاب عنصر اول می توانید از :first-child استفاده کنید یا شرط می بندم می توانید حدس بزنید که چطور کد بالا را طوری تغییر دهید که همین کار را انجام دهد


انتخاب همه عناصر غیر از ۵ تای اول

6-10

اگر تعداد عناصر موجود از ۱۰ عنصر بیشتر باشد باز هم این سلکتور همه عناصر بعد از ۵ را انتخاب خواهد کرد


فقط انتخاب ۵ عنصر اول

1-5


انتخاب ۴ درمیان عناصر ،شروع از عنصر ۱

159


 فقط انتخاب عناصر زوج و فرد

odd

even


 انتخاب عنصر آخر

last

همانطور که می بینید عنصر ۱۰ ام انتخاب شده است چون ما ۱۰ عنصر داریم ، اگر ۸ عنصر داشتیم عنصر هشتم انتخاب می شد وا گر ۱۳۶۸ عنصر داشتیم عنصر ۱۳۶۸ ام انتخاب می شد


انتخاب یک عنصر مانده به آخر

9

این کد عنصر نهم را انتخاب می کند چون ما ۱۰ عنصر داریم ، اگر ۳۰ عنصر داشتیم آنگاه عنصر ۲۹ ام انتخاب می شد

دوست دارید یکم بازی کنید ؟

شروع تست

پشتیبانی مرورگرها

جالبه که IE از نسخه ۹ به بعد این دستور رو پشتیبانی می کند ولی اگر نگران هستید می توانید از Selectivizr استفاده کنید .در ضمن اگر نحوه پشتیبانی مرورگرهای مختلف از دستورات CSS3 برایتان مهم است حتما قبل از استفاده سری به When Can I USE بزنید .

منبع

5 Comments

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

آخرین مقالات فتولیا در ایمیل شما

در خبرنامه ما عضو شوید و آخرین مطالب و مقالات آموزشی را اول شما دریافت کنید