: nth-child - Thủ thuật CSS

Bộ :nth-childchọn cho phép bạn chọn một hoặc nhiều phần tử dựa trên thứ tự nguồn của chúng, theo một công thức.

/* Select the first list item */ li:nth-child(1) ( ) /* Select the 5th list item */ li:nth-child(5) ( ) /* Select every other list item starting with first */ li:nth-child(odd) ( ) /* Select every 3rd list item starting with first */ li:nth-child(3n - 2) ( ) /* Select every 3rd list item starting with 2nd */ li:nth-child(3n - 1) ( ) /* Select every 3rd child item, as long as it has class "el" */ .el:nth-child(3n) ( )

Nó được định nghĩa trong thông số kỹ thuật CSS Selectors Level 3 là “lớp giả cấu trúc”, có nghĩa là nó được sử dụng để tạo kiểu cho nội dung dựa trên mối quan hệ của nó với các phần tử mẹ và anh chị em.

Giả sử chúng ta đang xây dựng một lưới CSS và muốn loại bỏ lề trên mỗi mô-đun lưới thứ tư. Đây là HTML đó:

 One Two Three Four Five

Thay vì thêm một lớp vào mọi mục thứ tư (ví dụ .last), chúng ta có thể sử dụng :nth-child:

.module:nth-child(4n) ( margin-right: 0; )

Các :nth-childselector có một đối số: điều này có thể là một số nguyên duy nhất, các từ khóa even, oddhay một công thức. Nếu một số nguyên được chỉ định, chỉ một phần tử được chọn - nhưng các từ khóa hoặc công thức sẽ lặp lại qua tất cả các phần tử con của phần tử mẹ và chọn các phần tử phù hợp - tương tự như điều hướng các mục trong một mảng JavaScript. Từ khóa “chẵn” và “lẻ” rất đơn giản (2, 4, 6, v.v. hoặc 1, 3, 5 tương ứng). Công thức được xây dựng bằng cú pháp an+b, trong đó:

“A” là một giá trị số nguyên
“N” là chữ cái theo nghĩa đen “n”
“+” Là một toán tử và có thể là “+” hoặc “-”
“B” là một số nguyên và là bắt buộc nếu có một toán tử trong công thức

Điều quan trọng cần lưu ý là công thức này là một phương trình và lặp lại qua từng phần tử anh em, xác định phần tử nào sẽ được chọn. Phần “n” của công thức, nếu được bao gồm, đại diện cho một tập hợp các số nguyên dương tăng dần (giống như lặp qua một mảng). Trong ví dụ trên, chúng tôi đã chọn mọi phần tử thứ tư với công thức 4n, công thức này hoạt động vì mỗi khi một phần tử được kiểm tra, “n” sẽ tăng thêm một (4 × 0, 4 × 1, 4 × 2, 4 × 3, v.v.). Nếu thứ tự của một phần tử khớp với kết quả của phương trình, nó sẽ được chọn (4, 8, 12, v.v.). Để được giải thích chuyên sâu hơn về phép toán liên quan, vui lòng đọc bài viết này.

Để minh họa thêm, đây là một số ví dụ về các :nth-childbộ chọn hợp lệ :

May mắn thay, không phải lúc nào bạn cũng phải tự mình làm toán - có một số :nth-childngười thử nghiệm và máy phát điện sẵn có:

CSS-Tricks Tester
Người kiểm tra của Lea Verou

: nth-child (an + b of)

Có một bộ lọc ít được biết đến có thể được thêm vào :nth-childtheo thông số kỹ thuật của Bộ chọn CSS: Khả năng chọn :nth-childmột tập hợp con các phần tử, sử dụng of định dạng. Giả sử bạn có một danh sách nội dung hỗn hợp: Một số có lớp .video, một số có lớp .picturevà bạn muốn chọn 3 hình ảnh đầu tiên. Bạn có thể làm như vậy với bộ lọc “of” như vậy:

:nth-child(-n+3 of .picture) ( /* Selects the first 3 elements applied not to ALL children but only to those matching .picture */ )

Lưu ý rằng điều này khác với việc thêm một bộ chọn trực tiếp vào :nth-childbộ chọn:

.picture:nth-child(-n+3) ( /* Not the same! This applies to elements matching .picture which _also_ match :nth-child(-n+3) */ )

Điều này có thể hơi khó hiểu, vì vậy một ví dụ có thể giúp minh họa sự khác biệt:

Hỗ trợ của trình duyệt cho bộ lọc “of” rất hạn chế: Tại thời điểm viết bài này, chỉ có Safari hỗ trợ cú pháp. Để kiểm tra trạng thái của trình duyệt yêu thích của bạn, đây là các vấn đề mở liên quan đến :nth-child(an+b of s):

Firefox: Hỗ trợ cho nth-child (An + B của sel)
Chrome: Triển khai: nth-child (an + b của S)

Điểm quan tâm

:nth-childlặp qua các phần tử bắt đầu từ đầu thứ tự nguồn. Sự khác biệt duy nhất giữa nó và :nth-last-childlà cái sau lặp lại qua các phần tử bắt đầu từ cuối thứ tự nguồn.
Cú pháp để chọn nsố phần tử đầu tiên hơi phản trực quan. Bạn bắt đầu với -n, cộng với số phần tử dương bạn muốn chọn. Ví dụ, li:nth-child(-n+3)sẽ chọn 3 liphần tử đầu tiên .
Bộ :nth-childchọn rất giống với :nth-of-typenhưng có một điểm khác biệt quan trọng: nó ít cụ thể hơn. Trong ví dụ của chúng tôi ở trên, chúng sẽ tạo ra cùng một kết quả bởi vì chúng tôi chỉ lặp qua .modulecác phần tử, nhưng nếu chúng tôi lặp qua một nhóm anh chị em phức tạp hơn, :nth-childsẽ cố gắng so khớp tất cả anh chị em, không chỉ anh chị em của cùng một loại phần tử. Điều này cho thấy sức mạnh của :nth-child-it có thể chọn bất kỳ phần tử anh em nào trong một sắp xếp, không chỉ các phần tử được chỉ định trước dấu hai chấm.

Hỗ trợ trình duyệt

Trình duyệt Chrome	Safari	Firefox	Opera	I E	Android	iOS
Bất kì	3.2+	Bất kì	9.5+	9+	Bất kì	Bất kì

:nth-childđã được giới thiệu trong Mô-đun 3 của Bộ chọn CSS, có nghĩa là các phiên bản cũ của trình duyệt không hỗ trợ nó. Tuy nhiên, hỗ trợ trình duyệt hiện đại là hoàn hảo và các bộ chọn giả mới được sử dụng rộng rãi trong môi trường sản xuất. Nếu bạn yêu cầu hỗ trợ trình duyệt cũ hơn, hoặc polyfill cho IE hoặc sử dụng các bộ chọn này theo những cách không quan trọng, đó là cải tiến liên tục, được khuyến nghị.