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 nhóm phần tử con trước khi áp dụng logic An+B cho nhóm đó.

Bramus

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

Với bộ chọn giả lớp :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 An+B cú pháp vi mô, bạn có thể kiểm soát chặt chẽ những phần tử mà bạn muốn chọn.

• :nth-child(2): Chọn thành phần con thứ 2.
• :nth-child(2n): Chọn tất cả các phần tử con chẵn (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ẻ (thứ 1, thứ 3, thứ 5, thứ 7, v.v.).
• :nth-child(5n+1): Chọn phần tử con thứ 1 (=(5×0)+1), thứ 6 (=(5×1)+1), thứ 11 (=(5×2)+1), ...
• :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), ...

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

• :nth-child(n+3): Chọn mọi phần tử con từ phần tử thứ 3 trở lên (thứ 3, thứ 4, thứ 5, v.v.).
• :nth-child(-n+5): Chọn mọi phần tử con cho đến phần tử thứ 5 (thứ 1, thứ 2, thứ 3, thứ 4, thứ 5).

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

• :nth-child(n+3):nth-child(-n+5): Chọn mọi phần tử con từ phần tử thứ 3 đến phần tử thứ 5 (thứ 3, thứ 4, thứ 5).

Khi dùng :nth-last-child(), bạn có thể 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.

Lựa chọn lọc trước bằng cú pháp of S

Điểm 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 of S được chỉ định, logic An+B chỉ được áp dụng cho những 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 thao tác.

Ví dụ

Ví dụ: :nth-child(2 of .highlight) chọn phần tử trùng khớp thứ hai có lớp .highlight. Nói cách khác: trong số tất cả các phần tử con có lớp .highlight, hãy chọn phần tử 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.

Lưu ý rằng S là một danh sách bộ chọn, tức là danh sách này 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 nhóm các phần tử ngang hàng.

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

Đường kẻ sọc, xem lại

Một ví dụ điển hình về trường hợp sử dụng :nth-child() là khi tạo một bảng có sọc ngựa vằn. Đây là một kỹ thuật trực quan, trong đó mỗi hàng của bảng sẽ có màu sắc xen kẽ. Thông thường, bạn sẽ tiếp cận vấn đề này như sau:

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

Mặc dù cách này hoạt động tốt đối với các bảng tĩnh, nhưng sẽ gây ra vấn đề khi bạn bắt đầu lọc nội dung bảng một cách linh hoạt. Ví dụ: khi hàng 2 bị ẩn, bạn sẽ thấy hàng 1 và hàng 3, mỗi hàng có cùng 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;
}

Thật tuyệt vời, đúng không?

Ảnh của Markus Spiske trên Unsplash