Bộ :last-childchọn cho phép bạn nhắm mục tiêu phần tử cuối cùng trực tiếp bên trong phần tử chứa nó. 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 nội dung dựa trên mối quan hệ của nó với nội dung chính và anh chị em.
Giả sử chúng ta có một bài báo và muốn làm cho đoạn cuối nhỏ hơn, để đóng vai trò như một kết luận cho nội dung (giống như ghi chú của người biên tập):
Lorem ipsum…
Dolor sit amet…
Consectetur adipisicing…
Last paragraph…
Thay vì sử dụng một lớp (ví dụ .last), chúng ta có thể sử dụng :last-childđể chọn nó:
p:last-child ( font-size: 0.75em; )Cách sử dụng :last-childrất giống với :last-of-typenhưng có một điểm khác biệt quan trọng: nó ít cụ thể hơn. :last-childsẽ chỉ cố gắng khớp với phần tử con cuối cùng của một phần tử mẹ, trong khi last-of-typesẽ khớp với lần xuất hiện cuối cùng của một phần tử được chỉ định, ngay cả khi phần tử đó không bị chết cuối cùng trong HTML. Trong ví dụ trên, kết quả sẽ giống nhau, chỉ vì phần tử con cuối cùng articlecũng là pphần tử cuối cùng . Điều này cho thấy sức mạnh của :last-child: nó có thể xác định một phần tử có mối quan hệ với tất cả các anh chị em của nó, không chỉ anh chị em cùng loại.
Ví dụ đầy đủ hơn bên dưới minh họa việc sử dụng :last-childvà một bộ chọn lớp giả có liên quan :first-child,.
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ì |
: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ị.