Tự code rồi chạy thử... Chạy Thử

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

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

Chạy thử Css :nth-child odd - even

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:

Odd là xử lý số thứ tự lẻ, Even là xử lý số thứ tự chẵn:

Css :nth-child odd

li 1
li 2
li 3
li 4
li 5
li 6
li 7
li 8

Css :nth-child even

li 1
li 2
li 3
li 4
li 5
li 6
li 7
li 8

Chạy thử Css :nth-child odd - even nằm trong bài viết Bộ chọn :nth-child trong CSS