CSS :last-child selector nhắm mục tiêu đến phần tử con cuối cùng. Nó áp dụng các kiểu dáng cho phần tử con cuối cùng trong phần tử cha. Các kiểu dáng này dựa trên vị trí trong container cha, không phân biệt loại phần tử. Nếu phần tử cha bị thiếu hoặc cấu trúc sai, selector sẽ không hoạt động. Vì không có mối quan hệ cha-con rõ ràng để tham chiếu.
Cú pháp
:last-child {
//property
}
HTML
<html>
<head>
<style>
p:last-child {
background: limegreen;
color: white;
font-style: italic;
font-size: 1.875em;
}
</style>
</head>
<body>
<p>I am first child.</p>
<p>I am second child.</p>
<p>I am third child.</p>
<p>I am last child.</p>
</body>
</html>
Trong trường hợp này, các kiểu dáng được áp dụng cho thẻ <p> cuối cùng. Thẻ này nằm trong container <body>.
Đầu ra:
Cách hoạt động của :last-child Selector?
:last-child selector hoạt động dựa trên vị trí của phần tử. Vị trí này nằm trong container cha của nó. Để hiểu rõ hơn, chúng ta hãy phân tích nó.
- :last-child selector chọn một phần tử con cuối cùng. Phần tử này phải là con cuối của phần tử cha.
- Điều này áp dụng bất kể loại phần tử nào. Ví dụ, đoạn văn (<p>) cuối trong <div> có thể được chọn. Hoặc mục danh sách (<li>) cuối trong <ul> cũng được chọn.
Tuy nhiên, chỉ phần tử cuối cùng là con trực tiếp của phần tử cha mới được nhắm mục tiêu. Nếu bạn có các phần tử lồng nhau, :last-child selector sẽ không nhắm mục tiêu. Nó chỉ nhắm mục tiêu đến phần tử con cuối cùng ở cùng cấp độ.
Điều gì xảy ra nếu thiếu phần tử cha?
:last-child selector phụ thuộc vào mối quan hệ cha-con. Nếu phần tử cha bị thiếu, selector sẽ không hoạt động như mong đợi. Ví dụ, nếu bạn quên đặt các phần tử vào container cha. Thì :last-child selector sẽ không nhắm mục tiêu đến bất kỳ thứ gì.
Các trình duyệt được hỗ trợ: