CSS :nth-of-type() کلاس فرضی

تعریف و کاربرد

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

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

نکته:مشاهده :nth-child() پseudo-class برای انتخاب عنصر فرزند با شماره شناسه n عنصر فرزند هر نوع (برچسب).

مثال

مثال 1

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

/* انتخاب دومین عنصر برادر div */
div:nth-of-type(2) {
  background: red;
}
/* انتخاب دومین عنصر لیست */
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

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

در اینجا، ما رنگ پس‌زمینه برای تمام عناصر <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 | odd | even | ان+ب) {
  declarations css;
}

جزئیات فنی

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

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