خوش آمدید

 

()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 می شود و فرزند چهارم انتخاب می شود و الی آخر.

از آنجایی که کنار آمدن با حساب کردن فرمولی که این انتخابگر می پذیرد می تواند گاهی گیج کننده باشد و از طرفی اگر نتیجه فرمول به صورت نمایشی قابل بررسی باشد به سرعت کار بیشتر کمک می کند, ابزارهایی برای این امر ساخته شده اند که در اینجا دو تا از بهترین آنها را معرفی می کنیم:

• lea.verou.me/demos/nth.html
• nth-test.com

مثل دیگر pseudo-class این انتخابگر هم می تواند به صورت زنجیره ای با دیگر انتخابگر ها استفاده شود:

tr:nth-child(odd):hover {
  /* styles here */
}

span:nth-child(2n+4)::after {
  /* styles here */
}

دمویی در زیر برای بررسی بیشتر آماده شده است:

 

 

توجه داشته باشید که در زمان شمارش عناصر, تمام عناصر آن سطر شمارش می شوند و نه فقط همان نوعی که ما انتخابگر را بر اساس آن می نویسیم. در مثال زیر فرزند اول سطر, عنصر 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 کار می کند.