Một điều thú vị mà chúng ta có thể làm với bộ chọn con thứ n là chọn mọi phần tử x. Vì vậy, giả sử, chẳng hạn chúng ta muốn mọi phần tử thứ tư
li:nth-child[4n] {
color: purple;
}
Bây giờ mọi phần tử con thứ 4 được chọn
Hoặc nếu chúng tôi muốn bao gồm mục đầu tiên
li:nth-child[4n + 1] {
color: purple;
}
Kết quả
Ví dụ, chúng ta cũng có thể bắt đầu từ phần tử thứ hai
li:nth-child[4n + 2] {
color: purple;
}
Kết quả
Chọn mọi mục trừ x mục đầu tiên permalink
Chúng tôi thậm chí có thể sử dụng bộ chọn để chọn mọi thẻ trừ ba phần tử đầu tiên
li:nth-child[n + 4] {
color: teal;
}
Kết quả
Chọn x số phần tử đầu tiên permalink
Một điều thú vị khác mà chúng ta có thể làm là chỉ chọn số lượng x đầu tiên. Hãy lấy ba mục đầu tiên
li:nth-child[-n + 3] {
color: teal;
}
Kết quả
Chọn phần tử cuối cùng permalink
Chúng ta thậm chí có thể chọn phần tử cuối cùng
li:last-child {
color: orange;
}
Kết quả
Chúng tôi cũng có thể bù đắp để có được mục danh sách thứ hai đến cuối cùng
li:nth-child[3] {
color: green;
}
0Kết quả
Bộ chọn kết hợp liên kết cố định
Chúng ta cũng có thể kết hợp các bộ chọn con thứ n
Giả sử bạn muốn lấy mọi số chẵn từ một số lượng trong danh sách lẻ
li:nth-child[3] {
color: green;
}
1li:nth-child[3] {
color: green;
}
2Điều này sẽ nhận được tất cả các thẻ
li:nth-child[3] {
color: green;
}
3 lẻ và sau đó là tất cả các thẻ li:nth-child[3] {
color: green;
}
4 chẵnKết quả
Xem tất cả các ví dụ trong Codepen này để dùng thử permalink
Chơi thử với Codepen này. Hãy thử và thay đổi một số bộ chọn để xem điều gì sẽ xảy ra
Xem thông tin cơ bản về bộ chọn con thứ n CSS của Chris Bongers [@rebelchris] trên CodePen
Hỗ trợ trình duyệt cho bộ chọn con thứ n permalink
Bộ chọn con thứ n có hỗ trợ tuyệt vời và có thể được sử dụng trong hầu hết các trình duyệt. Đừng ngần ngại sử dụng chúng
Cảm ơn bạn đã đọc và hãy kết nối. liên kết cố định
Cảm ơn bạn đã đọc blog của tôi. Vui lòng đăng ký nhận bản tin email của tôi và kết nối trên Facebook hoặc Twitter
Các. Bộ chọn lớp giả CSS nth-child[] dùng để so khớp các phần tử dựa trên vị trí của chúng trong một nhóm anh chị em. Nó khớp với mọi phần tử là con thứ n, bất kể loại nào, của phần tử cha của nó
cú pháp
li:nth-child[4n + 1] {
color: purple;
}
1Trong đó số là đối số duy nhất đại diện cho mẫu cho các phần tử phù hợp. Nó có thể là số lẻ, số chẵn hoặc ký hiệu hàm
- số lẻ. Nó đại diện cho các phần tử có vị trí lẻ trong một chuỗi. 1, 3, 5, v.v.
- thậm chí. Nó đại diện cho các phần tử có vị trí chẵn trong một chuỗi. 2, 4, 6, v.v.
- functional notation []: It represents elements whose position of siblings matches the pattern An+B, for every positive integer or zero value of n. Here, A represents the integer step size, B represents the integer offset.
ví dụ 1. Trong ví dụ này, mỗi đoạn lẻ được chọn. Công thức được sử dụng là 2n+1 i. e Các đoạn 1, 3, 5, v.v. được chọn