: nth-last-of-type - Thủ thuật CSS

Bộ :nth-last-of-typechọ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. 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. Nó hoạt động giống như :nth-of-typengoại trừ nó chọn các mục bắt đầu từ cuối thứ tự nguồn, không phải trên cùng.

Giả sử chúng ta có một danh sách không có thứ tự và muốn đánh dấu mục từ thứ hai đến mục cuối cùng (trong ví dụ chính xác này là “Mục thứ tư”):



First Item
Second Item
Third Item
Fourth Item
Fifth Item

Thay vì làm điều gì đó như thêm một lớp vào mục danh sách (ví dụ .highlight), chúng ta có thể sử dụng :nth-last-of-type:

li ( background: slategrey; ) /* select the second-last item */ li:nth-last-of-type(2) ( background: lightslategrey; )

Như bạn có thể thấy, :nth-last-of-typelấy một đối số: đây có thể là một số nguyên duy nhất, các từ khóa “chẵn” hoặc “lẻ” hoặc 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 trong JavaScript. Từ khóa “chẵn” và “lẻ” rất đơn giản (2, 4, 6, v.v. hoặc 1, 3, 5, v.v.). 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ứ hai với công thức 2n, công thức này hoạt động bởi vì mỗi khi một phần tử được kiểm tra, “n” sẽ tăng lên một (2 × 0, 2 × 1, 2 × 2, 2 × 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 (2, 4, 6, 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-last-of-typebộ chọn hợp lệ :

Xem Pen CSS-Tricks:: nth-last-of-type của Chris Coyier (@chriscoyier) trên CodePen.

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-last-of-typengườ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

Điểm quan tâm

:nth-last-of-typelặp qua các phần tử bắt đầu từ cuối thứ tự nguồn. Sự khác biệt duy nhất giữa nó và :nth-of-typelà cái sau lặp lại qua các phần tử bắt đầu từ cuối thứ tự nguồn.
Bộ :nth-last-of-typechọn rất giống với :nth-last-childnhưng có một điểm khác biệt quan trọng: nó 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 licá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-last-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-last-of-type-it nhắm mục tiêu vào một loại phần tử cụ thể trong một sự sắp xếp có mối quan hệ với các anh chị em tương tự, không phải tất cả các anh chị em.

Hỗ trợ trình duyệt

Trình duyệt Chrome	Safari	Firefox	Opera	I E	Android	iOS
Làm	3.2+	Làm	9.5+	9+	Làm	Làm

:nth-last-of-typeđã đượ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ị.