Bộ chọn :nth-child trong CSS
Trần Thị Vân - 1977
- 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>
Cách dùng :nth-child() linh hoạt trong CSS
Khi đã nắm được cách chọn phần tử theo vị trí, :nth-child() còn có thể xử lý những quy luật phức tạp hơn mà không cần thêm class riêng cho từng phần tử. Đây là điểm mạnh giúp CSS ngắn gọn và dễ mở rộng khi số lượng phần tử trên giao diện thay đổi.
Chọn nhiều phần tử bằng công thức :nth-child()
Thay vì chỉ chọn một vị trí cố định, bạn có thể dùng công thức an+b để tạo quy luật chọn phần tử. Trong đó n lần lượt nhận các giá trị 0, 1, 2...; còn a và b quyết định khoảng cách và vị trí bắt đầu.
Ví dụ, biểu thức 3n sẽ chọn các phần tử ở vị trí 3, 6, 9, 12... Cách này phù hợp với những giao diện cần xử lý phần tử theo từng nhóm cố định.
li:nth-child(3n) {
font-weight: bold;
}
Nếu muốn bắt đầu từ một vị trí cụ thể, có thể kết hợp phép cộng. Chẳng hạn, 3n+1 sẽ chọn các vị trí 1, 4, 7, 10... Nhờ đó, bạn có thể tạo quy luật trình bày mà không phải gắn class thủ công cho từng phần tử.
Kết hợp :nth-child() với các bộ chọn CSS khác
:nth-child() không nhất thiết phải sử dụng độc lập. Khi kết hợp với bộ chọn phần tử, class hoặc cấu trúc quan hệ, bạn có thể giới hạn phạm vi tác động và tránh áp dụng CSS nhầm sang những phần tử không mong muốn.
.product-list li:nth-child(2n) {
background: #f5f5f5;
}
Trong ví dụ trên, CSS chỉ xét các phần tử li nằm trong phần tử có class product-list, sau đó chọn những vị trí chẵn. Cách viết này đặc biệt hữu ích khi một trang có nhiều danh sách nhưng mỗi khu vực cần một quy tắc hiển thị khác nhau.
Khi cấu trúc HTML có nhiều loại phần tử nằm chung một cấp, cần nhớ rằng :nth-child() đếm vị trí của phần tử trong toàn bộ nhóm phần tử cùng cha, không chỉ đếm những phần tử có cùng loại với bộ chọn phía trước. Đây là nguyên nhân phổ biến khiến kết quả hiển thị không giống dự kiến.
Ứng dụng :nth-child() để tạo giao diện xen kẽ và theo nhóm
Một ứng dụng thực tế của :nth-child() là tạo kiểu xen kẽ cho danh sách, bảng dữ liệu hoặc các khối nội dung. Thay vì thêm class như row-even và row-odd bằng HTML hoặc PHP, CSS có thể tự xác định vị trí và áp dụng kiểu tương ứng.
table tr:nth-child(2n) {
background: #f7f7f7;
}
table tr:nth-child(2n+1) {
background: #ffffff;
}
Cách tiếp cận này giúp phần HTML giữ được cấu trúc đơn giản, đồng thời giao diện vẫn tự thích ứng khi thêm hoặc xóa dòng. Với danh sách sản phẩm, thẻ bài viết hoặc các ô trong bố cục dạng lưới, công thức an+b còn có thể dùng để xác định các phần tử xuất hiện sau mỗi nhóm nhất định.
Điểm quan trọng là nên dùng :nth-child() khi quy luật phụ thuộc vào vị trí thực sự của phần tử. Nếu một phần tử cần được nhận diện theo ý nghĩa hoặc trạng thái riêng, class thường sẽ rõ ràng và dễ bảo trì hơn.
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
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 *
