Pseudo-class nth-last-child
Pseudo-class nth-last-child chọn
phần tử là phần tử con thứ n của
phần tử cha, đếm từ cuối lên. Hành vi
tương tự nth-child,
chỉ khác là đếm từ cuối.
Cú pháp
bộ chọn:nth-last-child(số | odd | even | biểu thức) {
}
Giá trị
| Giá trị | Mô tả |
|---|---|
| số |
Số dương bắt đầu từ 1.
Chỉ định số thứ tự của phần tử muốn
chọn. Đánh số phần tử bắt đầu từ 1.
|
odd |
Các phần tử lẻ. |
even |
Các phần tử chẵn. |
| biểu thức |
Có thể tạo các biểu thức đặc biệt với chữ cái n,
biểu thị tất cả các số nguyên từ không (không phải từ một)
đến vô cùng. Vì vậy, 2n - nghĩa là tất cả các số chẵn
(bắt đầu từ số thứ hai).
Hiểu điều này như thế nào? Thay thế n lần lượt
bằng các số từ 0 trở đi: nếu n = 0, thì 2n cho 0 -
không có phần tử nào như vậy (đánh số phần tử từ 1),
nếu n = 1, thì 2n cho 2 - phần tử thứ hai, nếu n = 2,
2n cho 4 - phần tử thứ tư. Nếu viết 3n - đó
sẽ là mỗi phần tử thứ ba (bắt đầu từ phần tử thứ ba), và cứ thế.
|
Ví dụ
Trong ví dụ này, chúng ta sẽ làm cho màu đỏ
phần tử li, là phần tử con thứ 4 từ cuối lên
của phần tử cha của nó:
<ul>
<li>mục danh sách</li>
<li>mục danh sách</li>
<li>mục danh sách</li>
<li>mục danh sách</li>
<li>mục danh sách</li>
</ul>
li:nth-last-child(4) {
color: red;
}
:
Ví dụ
Bây giờ chúng ta sẽ làm cho màu đỏ tất cả
các phần tử li chẵn từ cuối lên:
<ul>
<li>mục danh sách</li>
<li>mục danh sách</li>
<li>mục danh sách</li>
<li>mục danh sách</li>
<li>mục danh sách</li>
</ul>
li:nth-last-child(even) {
color: red;
}
:
Ví dụ
Bây giờ chúng ta sẽ làm cho màu đỏ tất cả các phần tử lẻ từ
cuối lên li:
<ul>
<li>mục danh sách</li>
<li>mục danh sách</li>
<li>mục danh sách</li>
<li>mục danh sách</li>
<li>mục danh sách</li>
</ul>
li:nth-last-child(odd) {
color: red;
}
:
Ví dụ
Bây giờ chúng ta sẽ làm cho màu đỏ mỗi phần tử thứ ba
từ cuối lên li:
<ul>
<li>mục danh sách</li>
<li>mục danh sách</li>
<li>mục danh sách</li>
<li>mục danh sách</li>
<li>mục danh sách</li>
</ul>
li:nth-last-child(3n) {
color: red;
}
:
