Pseudo-class :nth-last-child() của CSS

Định nghĩa và cách sử dụng

CSS :nth-last-child(n) Pseudo-class được sử dụng để khớp với mỗi phần tử là phần tử con cuối cùng thứ n của phần tử cha, bất kể loại của nó là gì.

n Có thể là một số/danh mục, một từ khóa (lẻ hoặc chẵn)) hoặc một công thức (ví dụ như an + b)).

Lưu ý:Xem :nth-last-of-type() Pseudo-class được sử dụng để chọn phần tử là phần tử con cuối cùng thứ n của phần tử cha, bất kể loại của nó là gì. n phần tử con của phần tử.

Mô hình

Ví dụ 1

Chỉ định màu nền cho mỗi thẻ <p> là phần tử con cuối cùng thứ hai của phần tử cha:

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

Thử trực tiếp

Ví dụ 2

lẻ và chẵn Là từ khóa, có thể được sử dụng để khớp với các phần tử con có chỉ số là số lẻ hoặc số chẵn.

Ở đây, chúng ta sẽ chỉ định màu nền khác nhau cho các thẻ <p> có chỉ số đếm ngược là số lẻ và số chẵn:

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

Thử trực tiếp

Ví dụ 3

Sử dụng công thức (an + bMô tả:a Đại diện cho bước số nguyên, n là tất cả các số nguyên dương bắt đầu từ 0:b Là độ trôi dộng.

Ở đây, chúng ta sẽ chỉ định màu nền cho tất cả các thẻ <p> có chỉ số đếm ngược là số dương của 3:

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

Thử trực tiếp

Cú pháp CSS

:nth-last-child(index | lẻ | chẵn | an+b) {
  các định nghĩa css;
}

Chi tiết kỹ thuật

Hỗ trợ trình duyệt

Số trong bảng chỉ ra phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ pseudo-class.