- Trang chủ
- Hướng dẫn học
- Hướng dẫn học CSS3
- :last-child
:last-child là gì?
Nếu như
:first-child được dùng để chọn thành phần đầu tiên trong danh sách, thì :last-child
sẽ được dùng để chọn thành phần cuối cùng trong danh sách.
Ví dụ như danh sách bên dưới đây:
HTML viết:
- Item đầu tiên
- Item thứ 2
- Item thứ 3
- Item thứ 4
- Item cuối cùng
Hiển thị trình duyệt:
- Item đầu tiên
- Item thứ 2
- Item thứ 3
- Item thứ 4
- Item cuối cùng
Bây
giờ ta sẽ sử dụng :last-child
để thêm background-color cho "Item cuối cùng".
CSS viết:
ul li:last-child {
background-color: #fcc;
}
Hiển thị trình duyệt:
- Item đầu tiên
- Item thứ 2
- Item thứ 3
- Item thứ 4
- Item cuối cùng
Ví dụ thêm
Giả sử ta có một danh sách item được float theo chiều ngang như sau:
HTML viết:
- Item đầu tiên
- Item thứ 2
- Item thứ 3
- Item thứ 4
- Item cuối cùng
CSS viết:
ul { border: 1px solid #ccc; width: 540px; } ul li { background-color: #f1f1f1; float: left; text-align: center; margin-right: 10px; width: 100px; }
Hiển thị trình duyệt:
- Item đầu tiên
- Item thứ 2
- Item thứ 3
- Item thứ 4
- Item cuối cùng
Ta thấy, chiều rộng của
là 540px;, nhưng tổng chiều rộng của là [100px + 10px] x 5 = 550px, do đó tổng chiều rộng lớn hơn chiều rộng của
, nên một Item cuối cùng sẽ rơi xuống dòng thứ hai.
Để giải quyết trường
hợp này ta sử lý bằng :last-child
mà không cần thêm class để phục hồi cho "Item cuối cùng", viết lại CSS như sau:
CSS viết:
ul {
border: 1px solid #ccc;
width: 540px;
}
ul li {
background-color: #f1f1f1;
float: left;
text-align: center;
margin-right: 10px;
width: 100px;
}
ul li:last-child {
margin-right: 0;
}
Ta đã thêm đoạn CSS reset lại margin-right: 0;
cho "Item cuối cùng", ta được kết quả sau:
Hiển thị trình duyệt:
- Item đầu tiên
- Item thứ 2
- Item thứ 3
- Item thứ 4
- Item cuối cùng
Đó là một trong những cách xử lý hiệu quả nhất bằng cách sử dụng thuộc tính
:last-child
- Trang chủ
- Tham khảo
- CSS
- CSS3
- :last-child
Định nghĩa và sử dụng
- ":last-child" chọn thành phần cuối cùng của thành phần cha.
- Chỉ chọn thành phần có thành phần cha, những thành phần độc lập sẽ không được chọn.
Cấu trúc
:last-child { property: value; }
Ví dụ
HTML viết:
Thành phần thứ nhất
Thành phần thứ 2
Thành phần thứ 3
Thành phần thứ 4
Thành phần thứ 5
Thành phần thứ 6
Thành phần thứ nhất
Thành phần thứ 2Thành phần thứ 3
Thành phần thứ 4
Thành phần thứ 5
Thành phần thứ 6
Thành phần thứ nhất
- ul cùng cấp với p, nên tất cả li bên trong đều được coi là thành phần thứ 2
- ul cùng cấp với p, nên tất cả li bên trong đều được coi là thành phần thứ 2
Thành phần thứ 3
Thành phần thứ 4
Thành phần thứ 5
Thành phần thứ 6
Thành phần độc lập thứ nhất
Thành phần độc lập thứ 2
Thành phần độc lập thứ 3
Thành phần độc lập thứ 4
Thành phần độc lập thứ 5
Thành phần độc lập thứ 6
Hiển thị trình duyệt khi chưa có CSS:
Thành phần thứ nhất
Thành phần thứ 2
Thành phần thứ 3
Thành phần thứ 4
Thành phần thứ 5
Thành phần thứ 6
Thành phần thứ nhất
Thành phần thứ 2
Thành phần thứ 3
Thành phần thứ 4
Thành phần thứ 5
Thành phần thứ 6
Thành phần thứ nhất
- ul cùng cấp với p, nên tất cả li bên trong đều được coi là thành phần thứ 2
- ul cùng cấp với p, nên tất cả li bên trong đều được coi là thành phần thứ 2
Thành phần thứ 3
Thành phần thứ 4
Thành phần thứ 5
Thành phần thứ 6
Thành phần độc lập thứ nhất
Thành phần độc lập thứ 2
Thành phần độc lập thứ 3
Thành phần độc lập thứ 4
Thành phần độc lập thứ 5
Thành phần độc lập thứ 6
CSS viết:
p:last-child{ color: blue; }
Hiển thị trình duyệt khi đã có css:
Thành phần thứ nhất
Thành phần thứ 2
Thành phần thứ 3
Thành phần thứ 4
Thành phần thứ 5
Thành phần thứ 6
Thành phần thứ nhất
Thành phần thứ 2
Thành phần thứ 3
Thành phần thứ 4
Thành phần thứ 5
Thành phần thứ 6
Thành phần thứ nhất
- ul cùng cấp với p, nên tất cả li bên trong đều được coi là thành phần thứ 2
- ul cùng cấp với p, nên tất cả li bên trong đều được coi là thành phần thứ 2
Thành phần thứ 3
Thành phần thứ 4
Thành phần thứ 5
Thành phần thứ 6
Thành phần độc lập thứ nhất
Thành phần độc lập thứ 2
Thành phần độc lập thứ 3
Thành phần độc lập thứ 4
Thành phần độc lập thứ 5
Thành phần độc lập thứ 6
Ta thấy những thành phần
ở vị trí cuối cùng có thành phần cha đều đã được chọn.
Trình duyệt hỗ trợ
":last-child" được hỗ trợ trong đa số các trình duyệt, ngoài trừ trình duyệt Internet Explorer 8 trở xuống.