pseudo-class :nth-last-child() CSS

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

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

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

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

مثال

مثال 1

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

p:nth-last-child(2) {
  background-color: red;
}

آزمایش کنید

مثال 2

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

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

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

آزمایش کنید

مثال 3

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

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

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

آزمایش کنید

عبارت CSS

:nth-last-child(index |奇数 | حتی | an+b) {
  اظهارات css;
}

جزئیات فنی

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

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