pseudo-class :nth-last-of-type() CSS

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

CSS :nth-last-of-type(ن) pseudo-class برای تطبیق عناصر که به عنوان فرزند معکوس عنصر والد در نوع خاصی از شمارش آخرین هستند، استفاده می‌شود. ن عنصر.

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

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

مثال

مثال 1

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

همچنین، رنگ پس‌زمینه برای هر عنصر <li> که به عنوان سومین عنصر معکوس از عنصر والد خود است مشخص می‌شود:

p:nth-last-of-type(2) {
  background: red;
}
li:nth-last-of-type(3) {
background: yellow;
}

آزمایش کنید

مثال 2

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

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

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

آزمایش کنید

مثال 3

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

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

p:nth-last-of-type(3n) {
  background: red;
}
li:nth-last-of-type(3n) {
  background: yellow;
}

آزمایش کنید

زبان CSS

:nth-last-of-type(شمارش یا odd | even | ان+ب) {
  نشاندهای css;
}

جزئیات فنی

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

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