Bộ chọn :nth-child trong CSS
Trần Thị Vân - 1930
- 14/07/2025
Chức năng của Bộ chọn :nth-child trong CSS
Bộ chọn :nth-child trong CSS cho phép bạn định dạng các thẻ html, đặc biệt là thẻ li trong ul theo thứ tự của thẻ, giúp những trường hơp định dạng phức tạp dễ css hơn.
Các trường hợp sử dụng Bộ chọn :nth-child trong CSS
Css :nth-child theo số thứ tự
Chỉ định từng phần tử con theo số thứ tự 1, 2, 3 trở lên:
ul li:nth-child(3) {
background-color: red;
}
ul li:nth-child(2) {
background-color: yellow;
}
<!DOCTYPE html>
<html>
<head>
<title>Chạy thử Css :nth-child theo số thứ tự</title>
<style>
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
#ulnthtt li:nth-child(2) {
background-color: yellow;
}
#ulnthtt li:nth-child(3) {
background-color: red;
}
</style>
</head>
<body>
<h1>Chạy thử Css :nth-child theo số thứ tự</h1>
<p>Bộ chọn :nth-child trong CSS cho phép bạn định dạng các thẻ html, đặc biệt là thẻ li trong ul theo thứ tự của thẻ, giúp những trường hơp định dạng phức tạp dễ css hơn:</p>
<p>Chỉ định từng phần tử con theo số thứ tự 1, 2, 3 trở lên:</p>
<ul id="ulnthtt">
<li>li 1</li>
<li>li 2</li>
<li>li 3</li>
<li>li 4</li>
<li>li 5</li>
<li>li 6</li>
<li>li 7</li>
<li>li 8</li>
</ul>
</body>
</html>
Css :nth-child odd - even (lẻ - chẵn)
Odd là xử lý số thứ tự lẻ, Even là xử lý số thứ tự chẵn:
ul li:nth-child(even) {
background-color: yellow; /* Even là xử lý số thứ tự chẵn*/
}
ul li:nth-child(odd) {
background-color: yellow; /* Odd là xử lý số thứ tự lẻ */
}
<!DOCTYPE html>
<html>
<head>
<title>Chạy thử Css :nth-child odd - even</title>
<style>
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
#ulodd li:nth-child(odd) {
background-color: yellow; /* Odd là xử lý số thứ tự lẻ */
}
#uleven li:nth-child(even) {
background-color: yellow; /* Even là xử lý số thứ tự chẵn*/
}
</style>
</head>
<body>
<h1>Chạy thử Css :nth-child odd - even</h1>
<p>Bộ chọn :nth-child trong CSS cho phép bạn định dạng các thẻ html, đặc biệt là thẻ li trong ul theo thứ tự của thẻ, giúp những trường hơp định dạng phức tạp dễ css hơn:</p>
<p>Odd là xử lý số thứ tự lẻ, Even là xử lý số thứ tự chẵn:</p>
<h2>Css :nth-child odd</h2>
<ul id="ulodd">
<li>li 1</li>
<li>li 2</li>
<li>li 3</li>
<li>li 4</li>
<li>li 5</li>
<li>li 6</li>
<li>li 7</li>
<li>li 8</li>
</ul>
<h2>Css :nth-child even</h2>
<ul id="uleven">
<li>li 1</li>
<li>li 2</li>
<li>li 3</li>
<li>li 4</li>
<li>li 5</li>
<li>li 6</li>
<li>li 7</li>
<li>li 8</li>
</ul>
</body>
</html>
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Bộ chọn :nth-child trong CSS.
- 0 Bình luận
Trần Thị Vân
Trần Thị Vân là Content Creator tại Web Mới, phụ trách nghiên cứu, biên soạn nội dung và chia sẻ kiến thức về website, SEO, lập trình cùng các xu hướng công nghệ
Chia sẻ nội dung đánh giá của bạn về Bộ chọn :nth-child trong CSS
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 *
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 *
Bình luận, Hỏi đáp
Đăng ký tư vấn thiết kế website
Tìm hiểu 1 năm không bằng lắng nghe 1 câu tư vấn
