How to Style Even and Odd List Items
In this snippet, we’re going to demonstrate how to style the even, odd, or both the even and odd items of an unordered list. See examples with each of them.
Solution with the CSS :nth-child pseudo-class
You can easily style the even and odd items of a list using the :nth-child pseudo-class with the <kbd class="highlighted">even</kbd> and <kbd class="highlighted">odd</kbd> keywords, respectively.
Example of styling even list items:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
li:nth-child(even) {
background: #74d686;
font-size: 20px;
color: #ffffff;
}
</style>
</head>
<body>
<ul>
<li>Lorem Ipsum</li>
<li>Some text</li>
<li>Lorem Ipsum</li>
</ul>
</body>
</html>Result
<div class="demo p-2.5 mt-1 mb-5 not-prose">- Lorem Ipsum
- Some text
- Lorem Ipsum
</div>### Example of styling odd list items:
Example of styling odd list items:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
li:nth-child(odd) {
background: #74d686;
font-size: 20px;
color: #ffffff;
}
</style>
</head>
<body>
<ul>
<li>Lorem Ipsum</li>
<li>Some text</li>
<li>Lorem Ipsum</li>
</ul>
</body>
</html>And in our last example, see how to style both the <kbd class="highlighted">odd</kbd> and <kbd class="highlighted">even</kbd> items of an unordered list.
Example of styling both the "odd" and "even" list items:
Example of styling both the odd and even list items:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
li:nth-child(odd) {
background: #74d686;
font-size: 24px;
color: #ffffff;
}
li:nth-child(even) {
background: #d6d6d6;
font-size: 20px;
color: #666;
}
</style>
</head>
<body>
<ul>
<li>Lorem Ipsum</li>
<li>Some text</li>
<li>Lorem Ipsum</li>
<li>Some text</li>
</ul>
</body>
</html>