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

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

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

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

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

مثال

مثال 1

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

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

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

آزمایش کنید

مثال 2

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

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

جزئیات فنی

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

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