: nth-last-child - Thủ thuật CSS

Anonim

Bộ :nth-last-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. 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-childngoạ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 với số lượng mục không xác định và chúng tôi muốn làm nổi bật mục từ thứ hai đến 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-child:

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

Như bạn có thể thấy, :nth-last-childlấ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 thì 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 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ứ 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ệ :

Kiểm tra cây bút này!

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

Điểm quan tâm

  • :nth-last-childlặ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-childlà cái sau lặp lại qua các phần tử bắt đầu từ đầu thứ tự nguồn.
  • Bộ :nth-last-childchọn rất giống với :nth-last-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 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-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
Làm 3.2+ Làm 9.5+ 9+ Làm Làm

:nth-last-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ị.