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