Sức mạnh của mẫu: dùng nth-child
Thuộc phần Thành thạo CSS trong hành trình HTML của Coddy. Bài học 15 trên 43.
Lớp giả :nth-child() chọn phần tử dựa trên thứ tự của chúng bên trong phần tử cha, dùng một số hoặc mẫu để chọn phần tử cần lấy.
Ví dụ, ta có một danh sách:
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
<li>Fourth item</li>
<li>Fifth item</li>
</ul>Đây là cách chúng ta chọn các phần tử trong danh sách có chỉ số chẵn:
li:nth-child(even) {
background-color: lightblue;
}Đây là cách chúng ta chọn phần tử thứ 3:
li:nth-child(3) {
font-weight: bold;
}Đây là cách chọn mỗi phần tử thứ 5:
li:nth-child(5n) {
color: red;
}
Thử thách
DễTạo quy tắc CSS dùng :nth-child() để đặt nền màu vàng cho mỗi thẻ <div> thứ ba.
Tự làm thử
<!DOCTYPE html>
<html>
<head>
<title>Pattern Power: Using nth-child</title>
<style>
/* Write your CSS rule here */
</style>
</head>
<body>
<div class="container">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
<div>Item 5</div>
<div>Item 6</div>
<div>Item 7</div>
<div>Item 8</div>
<div>Item 9</div>
<div>Item 10</div>
</div>
</body>
</html>
Tự kiểm traBài học này có một bài trắc nghiệm ngắn. Bắt đầu bài học để trả lời và theo dõi tiến độ.
Tất cả bài học trong Thành thạo CSS
1Làm chủ bộ chọn: Kết hợp
Giới thiệuBộ chọn hậu duệBộ chọn conBộ chọn anh em liền kềBộ chọn anh em tổng quátThử thách ôn tập7Xây dựng giao diện với CSS Grid
Cơ bản về GridĐịnh vị phần tử theo hàng của GridCác vùng được đặt tênThử thách ôn tập3Các lớp giả cấu trúc
Các lớp giả cấu trúcChọn phần tử con đầu tiênChọn phần tử con cuối cùngSức mạnh của mẫu: dùng nth-childThử thách ôn tậpTự luyện tập: Playground Web