Bộ chọn CSS : nth-last-child ()
Thí dụ
Chỉ định màu nền cho mọi phần tử <p> là phần tử con thứ hai của phần tử cha của nó, tính từ phần tử cuối cùng:
p:nth-last-child(2)
{
background: red;
}
Thêm các ví dụ "Hãy tự mình thử" bên dưới.
Định nghĩa và Cách sử dụng
Bộ chọn khớp với mọi phần tử là phần tử con thứ n , bất kể loại, cha mẹ của nó, tính từ phần tử cuối cùng.:nth-last-child(n)
n có thể là một số, một từ khóa hoặc một công thức.
Mẹo: Nhìn vào bộ chọn : nth-last-of-type () để chọn phần tử là phần tử con thứ n , của một kiểu được chỉ định , của phần tử cha của nó, tính từ phần tử cuối cùng.
Phiên bản: | CSS3 |
---|
Hỗ trợ trình duyệt
Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ bộ chọn.
Selector | |||||
---|---|---|---|---|---|
:nth-last-child() | 4.0 | 9.0 | 3.5 | 3.2 | 9.6 |
Cú pháp CSS
:nth-last-child(number) {
css declarations;
}
Các ví dụ khác
Thí dụ
Lẻ và chẵn là những từ khóa có thể được sử dụng để so khớp các phần tử con có chỉ số là lẻ hoặc chẵn.
Ở đây, chúng tôi chỉ định hai màu nền khác nhau cho các phần tử p chẵn và lẻ, tính từ phần tử con cuối cùng:
p:nth-last-child(odd)
{
background: red;
}
p:nth-last-child(even)
{
background: blue;
}
Thí dụ
Sử dụng công thức ( an + b ). Mô tả: a đại diện cho kích thước chu kỳ, n là bộ đếm (bắt đầu từ 0) và b là giá trị bù.
Ở đây, chúng tôi chỉ định màu nền cho tất cả các phần tử p có chỉ số là bội số của 3, tính từ phần tử con cuối cùng:
p:nth-last-child(3n+0)
{
background: red;
}