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

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

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

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

li:nth-child(5) {
    color: green;   
}

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

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

li:nth-child(n+6) {
    color: green;   
}

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

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

li:nth-child(-n+5) {
    color: green;   
}

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

li:nth-child(4n-7) {  /* or 4n+1 */
    color: green;   
}

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

li:nth-child(odd) {
    color: green;   
}

li:nth-child(even) {
    color: green;   
}

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

li:last-child {
    color: green;
}

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

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

li:nth-last-child(2) {
    color: green;
}

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

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

شروع تست

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

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

منبع