:first-child là gì?
:first-child thật ra là bộ chọn có từ CSS, nhưng bộ chọn này rất tiện lợi khi bạn muốn reset giá trị của thành phần đầu tiên, đặc biệt là trong danh sách có chứa dữ liệu tự động (như danh sách sử lý bằng PHP & MySQL).
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
Nếu muốn điều khiển thành phần "Item đầu tiên", ví dụ thêm background-color, ta có thể sử dụng thêm class, tuy nhiên với :first-child ta có thể dễ dàng điều khiển thành phần đầu tiên này, viết CSS như sau:
CSS viết:
ul li:first-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