()nth-child: یک pseudo-class می باشد که به ما این امکان را می دهد تا فرزندان یک عنصر را بر اساس ترتیبشان انتخاب کنیم.
این انتخابگر یک مقدار مثبت به عنوان آرگومان می پذیرید و بر اساس آن عدد, عنصر مربوطه را انتخاب می کند. به عنوان مثال در زیر چهارمین آیتم یک لیست انتخاب و استایل دهی شده است:
li:nth-child(4) {
background-color: #4A90E2;
}
همچنین می توان آیتم های فرد (odd) و یا زوج (even) را از بین فرزندان یک عنصر انتخاب کرد:
li:nth-child(odd) {
/* عناصر فرد مثل اول, سوم, پنجم و الی آخر انتخاب خواند شد */
}
li:nth-child(even) {
/* عناصر زوج مثل دوم, چهارم, ششم و الی آخر انتخاب خواند شد */
}
استفاده از این انتخابگر کاربرد زیادی در استایل دهی جداول دارد به عنوان مثال می خواهیم ردیف های زوج یک جدول, رنگ پس زمینه مخصوص به خود را داشته باشند:
tr:nth-child(even) {
background-color: #eee;
}
این انتخابگر همچنین می تواند یک فرمول به عنوان آرگومان بپذیرد. به عنوان مثال :nth-child(an+b) که در آن a و b اعداد صحیح مثبتی هستند که ما انتخاب می کنیم. به عنوان مثال :nth-child(3n+1) که وقتی n=0 هست داریم: 3*0 + 1 = 1 یعنی در اولین حرکت اولین فرزند انتخاب می شود. و سپس n=1 می شود و فرزند چهارم انتخاب می شود و الی آخر.
از آنجایی که کنار آمدن با حساب کردن فرمولی که این انتخابگر می پذیرد می تواند گاهی گیج کننده باشد و از طرفی اگر نتیجه فرمول به صورت نمایشی قابل بررسی باشد به سرعت کار بیشتر کمک می کند, ابزارهایی برای این امر ساخته شده اند که در اینجا دو تا از بهترین آنها را معرفی می کنیم:
مثل دیگر pseudo-class این انتخابگر هم می تواند به صورت زنجیره ای با دیگر انتخابگر ها استفاده شود:
tr:nth-child(odd):hover {
/* styles here */
}
span:nth-child(2n+4)::after {
/* styles here */
}
دمویی در زیر برای بررسی بیشتر آماده شده است:
See the Pen nth-child() by Mojtaba Seyedi (@seyedi) on CodePen.
توجه داشته باشید که در زمان شمارش عناصر, تمام عناصر آن سطر شمارش می شوند و نه فقط همان نوعی که ما انتخابگر را بر اساس آن می نویسیم. در مثال زیر فرزند اول سطر, عنصر h2 می باشد پس انتخابگر p:nth-child(1) موجب انتخاب اولین عنصر p نمی شود بلکه برای انتخاب اولین پاراگراف باید نوشت: p:nth-child(2)
<div>
<h2>فرزند اول</h2>
<p>فرزند دوم</p>
<p>فرزند سوم</p>
<p>....</p>
<p>....</p>
</div>
برای اینکه بتوان شمارش فرزندان را فقط در یک نوع خاص عنصر انجام داد از انتخابگر ()nth-of-type: استفاده می شود.
پشتیبانی مرورگرها
()nth-child: در مرورگرهای کروم, فایرفاکس, اپرا +9.5 و اینترنت اکسپلورر +9 و همچنین در اندروید و iOS کار می کند.
کارت درسته آقا مجتبی :-)
دست گلت درد نکنه
ممنون از شما :)
خواهش می کنم.
عالی بود ممنون!
عالی بود.میشد یکم هم بحث رو ریاضی کنید و در مورد دنباله ها هم توضیح بدین که مثلا وقتی بخوایم ردیف های 1و4و7و10 و … جدول سلکت بشن چیکار کنیم.
سلام استاد
مرتضی جان فقط خواستم بگم خسته نباشی و تشکر
لزوما مثبت نیست. میتونه منفی هم بگیره. مثلا n- به اضافه 1
سلام
ممنون بابت مطالب مفیدتون
همه توضیحات عالی بود فقط بخش فرمول رو متوجه نشدم. ممنون میشم توضیح بدید
ممنون از سایت بسیاااار خوبتون😊
سلام از سایت خوبتون نهایت سپاس را دارم
واقعا تولید محتوا با این سطح کیفیت کار هر کسی نیست جز یک متخصص…تبریک میگم
سلام وققتون بخیر ممنون از توضیحاتتون.
به این صورت هم میتونیم مقدار بدیم به nth-child
سلام، ممنون از راهنماییتون
mrc dadash hal kardam matalebe bishtari bezar mamnon
حالا چطوری مقدار متغیر هارو تعریف کنیم؟ باید با js مقدار متغیر هارو تعریف کرد یا تو همین css میشه؟
راستی n رو جور دیگه ای میبینه (به عنوان ترتیب عنصر ها) یا هر متغیری که بهش مقدار ندادیم میاد اینجوری در نظر میگیره؟
راستی ، دمت گرم سایت خیلی محتوای خوبی داره (یه مرجعه برا من)
آقا دمت گرم بابت این سایت گلت
یه سوال این که میگید ترتیبت عناصر توی این شبه کلاس مهمه یعنی چی این رو من متوجه نشدم؟ ممنون میشه یه مثال واضح در این مورد بزنید
سلام، خیلی ممنون از توضیحاتتون، اما برای من مشکلی وجود داره که متاسفانه در آموزشتون ندیدم. من از وردپرس استفاده میکنم به تازگی یکی از افزونه های اساسی، بطور خود به خودی این مقدار را تولید میکند: div:nth-child و در طراحی سایت فاصله های خالی می اندازد! من این مشکل را با اسکریپت display:none; رفع کردم اما بازم هم فاصله های دیگری با کدهای مشابه تولید میشود.
به اینصورت:
div:nth-child(84)
div:nth-child(86)
div:nth-child(87)
div:nth-child(88)
آیا اسکریپتی و دستوری وجود دارد که بتوانم جلوی تولید این کد را بگیرم؟