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

تبلیغات
کانال تلگرام فتولیا

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

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

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

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

5

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


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

6-10

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


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

1-5


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

159


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

odd

even


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

last

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

در همین رابطه :   ایجاد نوار شناور اطلاع رسانی رایگان hellobar.com با jQuery

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

9

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

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

شروع تست

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

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

منبع

7 Comments

پاسخ دهید

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

More in CSS, CSS
از کدام فریم ورک Sass استفاده کنم، Compass یا Bourbon ?

تقریبا هر کسی که با Sass کار می کند ، بعد از مدتی از خود می پرسد : بالاخره کدام...

Close