Giả lớp nth-last-of-type
Giả lớp nth-last-of-type chọn
phần tử là phần tử con thứ n
của kiểu đã chỉ định thuộc phần tử cha, đếm từ cuối lên.
Hoạt động tương tự nth-of-type,
chỉ khác là việc đếm được thực hiện từ cuối.
Cú pháp
bộ chọn:nth-last-of-type(số | odd | even | biểu thức) {
}
Giá trị
| Giá trị | Mô tả |
|---|---|
| số |
Số dương bắt đầu từ 1.
Chỉ định vị trí của phần tử mà chúng ta muốn
chọn. Việc đánh số phần tử bắt đầu từ 1.
|
odd |
Các phần tử vị trí lẻ. |
even |
Các phần tử vị trí 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. Như vậy, 2n - có nghĩa là tất cả các số chẵn
(bắt đầu từ số thứ hai).
Hiểu như thế nào? Thay thế vào n lần lượt
các số từ 0 trở đi: nếu n = 0, thì 2n sẽ cho ra 0 -
không có phần tử nào như vậy (vì đánh số phần tử bắt đầu từ 1),
nếu n = 1, thì 2n sẽ cho ra 2 - phần tử thứ hai, nếu n = 2,
2n cho ra 4 - phần tử thứ tư. Nếu viết 3n - điều này
sẽ chọn mỗi phần tử thứ ba (bắt đầu từ phần tử thứ ba), và cứ thế.
|
Ví dụ
Hãy tìm h2 là phần tử h2 thứ 2
trong phần tử cha tính từ cuối lên:
<div>
<h2>tiêu đề</h2>
<p>đoạn văn</p>
<h2>tiêu đề</h2>
<p>đoạn văn</p>
<h2>tiêu đề</h2>
<p>đoạn văn</p>
<h2>tiêu đề</h2>
<p>đoạn văn</p>
<h2>tiêu đề</h2>
<p>đoạn văn</p>
<h2>tiêu đề</h2>
<p>đoạn văn</p>
<h2>tiêu đề</h2>
<p>đoạn văn</p>
</div>
h2:nth-last-of-type(2) {
color: red;
}
:
Ví dụ
Hãy tìm tất cả các phần tử h2 ở vị trí chẵn tính từ cuối lên:
<div>
<h2>tiêu đề</h2>
<p>đoạn văn</p>
<h2>tiêu đề</h2>
<p>đoạn văn</p>
<h2>tiêu đề</h2>
<p>đoạn văn</p>
<h2>tiêu đề</h2>
<p>đoạn văn</p>
<h2>tiêu đề</h2>
<p>đoạn văn</p>
<h2>tiêu đề</h2>
<p>đoạn văn</p>
<h2>tiêu đề</h2>
<p>đoạn văn</p>
</div>
h2:nth-last-of-type(even) {
color: red;
}
:
Ví dụ
Hãy tìm tất cả các phần tử h2 ở vị trí lẻ tính từ cuối lên:
<div>
<h2>tiêu đề</h2>
<p>đoạn văn</p>
<h2>tiêu đề</h2>
<p>đoạn văn</p>
<h2>tiêu đề</h2>
<p>đoạn văn</p>
<h2>tiêu đề</h2>
<p>đoạn văn</p>
<h2>tiêu đề</h2>
<p>đoạn văn</p>
<h2>tiêu đề</h2>
<p>đoạn văn</p>
<h2>tiêu đề</h2>
<p>đoạn văn</p>
</div>
h2:nth-last-of-type(odd) {
color: red;
}
:
