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

<!DOCTYPE HTML>
<html>
<head></head>
<body>
<ul>
    <li>Item đầu tiên</li>
    <li>Item thứ 2</li>
    <li>Item thứ 3</li>
    <li>Item thứ 4</li>
    <li>Item cuối cùng</li>
</ul>
</body>
</html>

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:

<!DOCTYPE HTML>
<html>
<head></head>
<body>
<ul>
    <li>Item đầu tiên</li>
    <li>Item thứ 2</li>
    <li>Item thứ 3</li>
    <li>Item thứ 4</li>
    <li>Item cuối cùng</li>
</ul>
</body>
</html>

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 <ul> là 540px;, nhưng tổng chiều rộng của <li> là (100px + 10px) x 5 = 550px, do đó tổng chiều rộng lớn hơn chiều rộng của <ul>, 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

:first-child

:nth-child()