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

Trình soạn thảo - Chạy thử Css :nth-child odd - even

Kết quả - Chạy thử Css :nth-child odd - even

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>

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