Cách sử dụng lớp giả CSS :last-child
Trần Thị Vân - 1714
- 14/07/2025
Chức năng của lớp giả CSS :last-child
Lớp giả CSS :last-child dùng để định dạng class cuối cùng trong các class giống nhau của phần tử cha hoặc định dạng phần tử con cuối cùng trong các phần tử con giống nhau trong phần tử cha.
Cách sử dụng lớp giả CSS :last-child
ul li:last-child{
border-bottom:0px solid green
}
<!DOCTYPE html>
<html>
<head>
<title>Chạy thử Cách sử dụng lớp giả CSS :last-child</title>
<style>
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
#divlgf{width:100%;float:left;height:auto;border:1px solid #ddd}
#divlgf ul{margin:0px;padding:0px;}
#divlgf ul li{margin:0px;padding:0px;list-style:none;padding:7px 5px;width:100%;float:left;height:auto;background:red;color:#000;border-bottom:5px solid green}
#divlgf ul li:last-child{border-bottom:0px solid green}
</style>
</head>
<body>
<h1>Chạy thử Cách sử dụng lớp giả CSS :last-child</h1>
<p>Lớp giả CSS :last-child dùng để định dạng class cuối cùng trong các class giống nhau của phần tử cha hoặc định dạng phần tử con cuối cùng trong các phần tử con giống nhau trong phần tử cha:</p>
<div id="divlgf">
<ul>
<li>CSS :last-child</li>
<li>CSS :last-child</li>
<li>CSS :last-child</li>
<li>CSS :last-child</li>
<li>CSS :last-child</li>
<li>CSS :last-child</li>
</ul>
</div>
</body>
</html>
Khi nào nên sử dụng :last-child trong CSS?
Selector :last-child phù hợp khi cần áp dụng kiểu riêng cho phần tử nằm ở vị trí cuối cùng trong nhóm phần tử cha. Đây là cách đơn giản để xử lý những trường hợp mà phần tử cuối có quy tắc hiển thị khác với các phần tử đứng trước.
Loại bỏ khoảng cách ở phần tử cuối cùng
Một tình huống thường gặp là danh sách có khoảng cách giữa các mục. Nếu dùng margin-bottom cho tất cả phần tử, mục cuối cùng cũng nhận khoảng cách dù phía sau không còn nội dung.
Có thể dùng :last-child để loại bỏ khoảng cách này:
.menu li {
margin-bottom: 10px;
}
.menu li:last-child {
margin-bottom: 0;
}
Cách làm này giúp khoảng cách giữa các mục được giữ nguyên, đồng thời tránh tạo khoảng trống không cần thiết ở cuối danh sách.
Tạo kiểu riêng cho phần tử cuối danh sách
Khi thiết kế menu, danh sách liên kết hoặc các khối nội dung lặp lại, phần tử cuối đôi khi cần một kiểu trình bày khác. Chẳng hạn, có thể bỏ đường viền dưới của mục cuối để giao diện gọn hơn.
.list-item {
border-bottom: 1px solid #ddd;
}
.list-item:last-child {
border-bottom: none;
}
Ưu điểm của cách này là không cần thêm class riêng vào phần tử cuối. CSS tự xác định vị trí của phần tử dựa trên cấu trúc HTML.
Kết hợp :last-child với các selector CSS khác
:last-child có thể kết hợp với class, phần tử con và các selector khác để giới hạn phạm vi áp dụng. Điều này đặc biệt hữu ích khi một khu vực chứa nhiều nhóm phần tử có cấu trúc tương tự.
.product-list .product:last-child {
margin-bottom: 0;
}
Trong ví dụ trên, quy tắc chỉ tác động đến phần tử có class product khi nó đồng thời là phần tử con cuối cùng của phần tử cha phù hợp. Vì vậy, cần kiểm tra đúng cấu trúc HTML thay vì chỉ nhìn vào thứ tự hiển thị trên giao diện.
Khi sử dụng :last-child, nên nhớ rằng selector này xét vị trí của phần tử trong phần tử cha, không đơn thuần tìm phần tử cuối có cùng class. Hiểu đúng điểm này sẽ giúp tránh nhiều lỗi khi áp dụng CSS cho danh sách và các bố cục lặp lại.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Cách sử dụng lớp giả CSS :last-child.
- 0 Bình luận
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *
