پسوند CSS :nth-child()

تعریف و استفاده

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

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

n می‌تواند یک عدد/شمارنده، یک کلمه کلیدی (غیرزوج یا زوج) یا یک فرمول (مانند an + b)

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

مثال

مثال 1

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

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

آزمایش کنید

مثال 2

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

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

p:nth-child(odd) {
  background-color: red;
}
p:nth-child(even) {
  background: lightgreen;
}

آزمایش کنید

مثال 3

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

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

p:nth-child(3n+1) {
  background-color: red;
}

آزمایش کنید

مثال 4

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

p:nth-child(3n-1) {
  background-color: red;
}

آزمایش کنید

قواعد CSS

:nth-child(index | غیرزوج | زوج | an+b) {
  تعریف‌های css;
}

جزئیات فنی

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

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