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