Có nhiều quyền kiểm soát hơn đối với các lựa chọn :nth-child() bằng cú pháp S

Lọc trước một tập hợp các phần tử con trước khi áp dụng logic An+B cho tập hợp đó.

Thần Bramus

Bộ chọn lớp giả :nth-child() và :nth-last-child()

Với bộ chọn lớp giả :nth-child(), bạn có thể chọn Các phần tử trong DOM theo chỉ mục của chúng. Khi sử dụng cú pháp An+B, bạn sẽ có thể kiểm soát chính xác những phần tử mà mình muốn chọn.

  • :nth-child(2): Chọn thành phần con thứ hai.
  • :nth-child(2n): Chọn tất cả các phần tử con đều (thứ 2, thứ 4, thứ 6, thứ 8, v.v.).
  • :nth-child(2n+1): Chọn tất cả các phần tử con lẻ (1, 3, 5, 7, v.v.).
  • :nth-child(5n+1): Chọn phần tử con đầu tiên (=(5×0)+1), thứ 6 (=(5×1)+1), thứ 11 (=(5×2)+1), ... phần tử con.
  • :nth-child(5n+2): Chọn phần tử con thứ 2 (=(5×0)+2), thứ 7 (=(5×1)+2), thứ 12 (=(5×2)+2), ... phần tử con.

Tuy nhiên, có nhiều lựa chọn mẫu quảng cáo hơn mà bạn có thể thực hiện nếu bỏ qua tham số A. Ví dụ:

  • :nth-child(n+3): Chọn tất cả trẻ từ thứ 3 trở lên (thứ 3, thứ 4, thứ 5, v.v.).
  • :nth-child(-n+5): Chọn tất cả trẻ cho đến trẻ thứ 5 (thứ 1, thứ 2, thứ 3, thứ 4, thứ 5).

Kết hợp một vài trong số các lựa chọn :nth-child() này để bạn có thể chọn phạm vi các phần tử:

  • :nth-child(n+3):nth-child(-n+5): Chọn tất cả trẻ từ trẻ thứ 3 đến trẻ thứ 5 (thứ 3, thứ 4, thứ 5).

Khi sử dụng :nth-last-child(), bạn có thể thực hiện các lựa chọn tương tự, nhưng thay vì bắt đầu đếm từ đầu, bạn sẽ bắt đầu đếm từ cuối.

Các lựa chọn lọc trước có cú pháp of S

Tính năng mới trong Bộ chọn CSS cấp 4 là khả năng truyền danh sách bộ chọn vào :nth-child() và :nth-last-child() (không bắt buộc).

:nth-child(An+B [of S]?)
:nth-last-child(An+B [of S]?)

Khi bạn chỉ định of S, logic An+B chỉ được áp dụng cho các phần tử khớp với danh sách bộ chọn S đã cho. Về cơ bản, điều này có nghĩa là bạn có thể lọc trước các thành phần con trước khi An+B thực hiện việc này.

Hỗ trợ trình duyệt

  • 111
  • 111
  • 113
  • 9

Ví dụ

Ví dụ: :nth-child(2 of .highlight) chọn phần tử phù hợp thứ hai có lớp .highlight. Đặt cách khác: trong số tất cả thành phần con có lớp .highlight, hãy chọn thành phần thứ hai.

Điều này trái ngược với .highlight:nth-child(2) chọn phần tử có lớp .highlight và cũng là phần tử con thứ hai.

Trong bản minh hoạ bên dưới, bạn có thể thấy sự khác biệt này:

  • Phần tử khớp với :nth-child(2 of .highlight) có đường viền màu hồng.
  • Phần tử khớp với .highlight:nth-child(2) có đường viền màu xanh lục.

Xin lưu ý rằng S là một danh sách bộ chọn, tức là chấp nhận nhiều bộ chọn được phân tách bằng dấu phẩy. Ví dụ: :nth-child(4 of .highlight, .sale) chọn phần tử thứ tư là .highlight hoặc .sale trong một tập hợp các thành phần đồng cấp.

Trong bản minh hoạ bên dưới, phần tử phù hợp với :nth-child(4 of .highlight, .sale) có đường viền màu cam được áp dụng.

Xem lại chủ đề cưỡi ngựa vằn

Một ví dụ cổ điển trong đó :nth-child() được sử dụng là khi tạo bảng có sọc zebra. Đây là một kỹ thuật trực quan, trong đó mỗi hàng trong bảng xen kẽ các màu. Thông thường, quy trình này sẽ diễn ra như sau:

tr:nth-child(even) {
  background-color: lightgrey;
}

Tuy phương thức này hiệu quả đối với các bảng tĩnh, nhưng khi bạn bắt đầu lọc linh động nội dung bảng thì sẽ gặp vấn đề. Ví dụ: khi hàng hai bị ẩn, bạn sẽ hiển thị hàng một và ba, mỗi hàng có cùng một màu nền.

Để khắc phục vấn đề này, chúng ta có thể tận dụng :nth-child(An+B [of S]?) bằng cách loại trừ các hàng bị ẩn khỏi logic An+B:

tr:nth-child(even of :not([hidden])) {
  background-color: lightgrey;
}

Khá đáng yêu đúng không?

Ảnh của Markus Spiske trên Unsplash