کلاس :nth-of-type() پوسته

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

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

n می‌تواند یک عدد/شماره باشد، یک کلمه کلیدی (odd یا even) یا یک فرمول (مانند an + b)

توجه:ببینید :nth-child() پس‌کلید برای انتخاب هر فرزند به عنوان فرزند شماره n عنصر هر فرزند زیر، بدون توجه به نوع آن.

مثال

مثال 1

چگونه استفاده کنیم :nth-of-type() انتخاب‌کننده:

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

آزمایش کنید

مثال 2

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

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

p:nth-of-type(odd) {
  background: red;
}
p:nth-of-type(even) {
  background: blue;
}

آزمایش کنید

مثال 3

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

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

p:nth-of-type(3n+0) {
  background: red;
}

آزمایش کنید

مثال 4

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

p:nth-of-type(3n-1) {
  background: red;
}

آزمایش کنید

قواعد CSS

:nth-of-type(index | غیرپاراست | پاراست | an+b) {
  declarations css;
}

جزئیات فنی

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

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