CSS :nth-child() شبه نوع

دفع و استعمال

CSS :nth-child(n)}} شبه‌کلاس برای تطبیق عناصر به عنوان فرزند n عنصر فرزند.

این شبه‌کلاس بر اساس نشان‌دهنده عنصر در لیست فرزندان عنصر والد خود تطبیق می‌یابد.

n می‌تواند یک عدد/نشان‌دهنده، یک کلمه کلیدی (غیرصفر یا صفر) یا یک فرمول (مانند اn + ب)

توضیح:ببینید :nth-of-type() شبه‌کلاس برای انتخاب عناصر به عنوان فرزندنوع یکسان (نام برچسب)ی n عنصر فرزند.

مثال

مثال 1

چگونه استفاده شود :nth-child() شبه‌کلاس:

/* انتخاب هر چهارمین عنصر در هر گروه برادران */
:nth-child(4) {
  background-color: زرد;
}
/* انتخاب دومین عنصر برادر div */
div:nth-child(2) {
  background-color: قرمز;
}
/* انتخاب دومین عنصر li در لیست */
li:nth-child(2) {
  background-color: سبز روشن;
}

آزمایش کنید

مثال 2

غیرصفر و صفر این یک کلمه کلیدی است که می‌توان از آن برای تطبیق عناصر با نشان‌دهنده عددی غیرصفر یا صفر استفاده کرد (نشان‌دهنده اولین عناصر 1 است).

در اینجا، ما رنگ پس‌زمینه برای عناصر <p> با نشان‌دهنده عددی غیرصفر و صفر مشخص می‌کنیم:

p:nth-child(odd) {
  background-color: قرمز;
}
p:nth-child(even) {
  background: سبز روشن;
}

آزمایش کنید

مثال 3

با استفاده از فرمول (اn + ب) توضیح:ا این یک گام عددی است، n از 0 شروع می‌شود و شامل تمام اعداد غیرمنفی است،ب این یک حاشیه عددی است.

در اینجا، ما رنگ پس‌زمینه برای تمام عناصر <p> با نشان‌دهنده 3 چندگانگی مشخص می‌کنیم (این انتخاب می‌کند: سومین، ششمین، نهمین و غیره):

p:nth-child(3n+1) {
  background-color: قرمز;
}

آزمایش کنید

مثال 4

در اینجا، ما رنگ پس‌زمینه برای تمام عناصر <p> با نشان‌دهنده 3 چندگانگی مشخص می‌کنیم. سپس 1 را کم می‌کنیم (این انتخاب می‌کند: اولین، چهارمین، هفتمین و غیره):

p:nth-child(3n-1) {
  background-color: قرمز;
}

آزمایش کنید

نویسش CSS

:nth-child(نشان‌دهنده | غیرصفر | صفر | ان+ب) {
  اظلاعات css;
}

جزئیات فنی

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

اعداد جدول نشان‌دهنده نسخه اولین مرورگر پشتیبان از این شبه‌کلاس‌ها هستند.