Làm cách nào để chọn con thứ ba trong css?

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;
}

0

Kế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;
}

1

li: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ẵn

Kế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;
}

1

Trong đó 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