Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Use of :even and :odd pseudo-classes with list items in CSS
CSS :nth-child(odd) and :nth-child(even) pseudo-classes are used to select alternative child elements. These pseudo-classes work with list items to create alternate styling like text color and background, which improves readability and visual organization.
Syntax
/* Select odd-positioned elements */
selector:nth-child(odd) {
property: value;
}
/* Select even-positioned elements */
selector:nth-child(even) {
property: value;
}
CSS :nth-child(odd) Pseudo-Class
The :nth-child(odd) pseudo-class selects elements that are at odd positions (1st, 3rd, 5th, etc.) within their parent container.
Example
In this example, we use :nth-child(odd) to style odd-positioned list items with green text color
<!DOCTYPE html>
<html>
<head>
<style>
ul {
font-family: Arial, sans-serif;
list-style-type: decimal;
}
li:nth-child(odd) {
color: #04af2f;
font-weight: bold;
}
</style>
</head>
<body>
<h3>Odd List Items Styling</h3>
<ul>
<li>Item 1 (Odd)</li>
<li>Item 2</li>
<li>Item 3 (Odd)</li>
<li>Item 4</li>
<li>Item 5 (Odd)</li>
<li>Item 6</li>
<li>Item 7 (Odd)</li>
</ul>
</body>
</html>
A numbered list appears where items 1, 3, 5, and 7 are displayed in bold green text, while items 2, 4, and 6 remain in normal black text.
Note: You can also use :nth-child(2n+1) as an equivalent selector for odd elements.
CSS :nth-child(even) Pseudo-Class
The :nth-child(even) pseudo-class selects elements that are at even positions (2nd, 4th, 6th, etc.) within their parent container.
Example
In this example, we use :nth-child(even) to style even-positioned list items with cyan text color
<!DOCTYPE html>
<html>
<head>
<style>
ul {
font-family: Arial, sans-serif;
list-style-type: decimal;
}
li:nth-child(even) {
color: #1af0d0;
font-weight: bold;
}
</style>
</head>
<body>
<h3>Even List Items Styling</h3>
<ul>
<li>Item 1</li>
<li>Item 2 (Even)</li>
<li>Item 3</li>
<li>Item 4 (Even)</li>
<li>Item 5</li>
<li>Item 6 (Even)</li>
<li>Item 7</li>
</ul>
</body>
</html>
A numbered list appears where items 2, 4, and 6 are displayed in bold cyan text, while items 1, 3, 5, and 7 remain in normal black text.
Note: You can also use :nth-child(2n) as an equivalent selector for even elements.
Example: Alternating Row Colors
This example demonstrates using both odd and even pseudo-classes together to create a zebra-stripe effect
<!DOCTYPE html>
<html>
<head>
<style>
ul {
font-family: Arial, sans-serif;
list-style: none;
padding: 0;
max-width: 300px;
}
li {
padding: 10px;
margin: 2px 0;
}
li:nth-child(odd) {
background-color: #f0f8ff;
color: #2c3e50;
}
li:nth-child(even) {
background-color: #e8f5e8;
color: #27ae60;
}
</style>
</head>
<body>
<h3>Alternating List Item Styles</h3>
<ul>
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
<li>Fourth Item</li>
<li>Fifth Item</li>
<li>Sixth Item</li>
</ul>
</body>
</html>
A styled list appears with alternating background colors: odd items have light blue backgrounds with dark blue text, even items have light green backgrounds with green text, creating a zebra-stripe pattern.
Conclusion
The :nth-child(odd) and :nth-child(even) pseudo-classes provide an elegant way to style alternating elements in lists. These selectors enhance readability and create visually appealing patterns without requiring additional classes or JavaScript.
6K+ Views
