Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Use of Even and Odd Pseudo-Classes with List Items in CSS
CSS :even and :odd psuedo classes are used to select or target the alternative child elements. CSS even and odd psuedo class is used with list items to create alternate style like text color, background which increases the readability.
In this article, we are having an unordered list. We will be understanding use of :even and :odd pseudo-classes with list items.
CSS odd Psuedo-Class
The :odd pseudo-class is used to select the HTML elements which are at odd positions. We can use the :odd class with the nth-child() or :nth-of-type() psuedo-class selector to select all the child elements at odd places in the list.
Example
In this example, we have used ol and li tags to create an unordered list. We are using :odd psuedo class to select the list items placed at odd places and change their text color.
<html>
<head>
<style>
li:nth-child(odd) {
color: #04af2f;
}
</style>
</head>
<body>
<h3>CSS :odd psuedo-class Example</h3>
<p>
In this example, we have used <strong>odd</strong>
pseudo-class to change the color of odd list items.
</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
</ul>
</body>
</html>
Note: We can also use 2n+1 as an argument for selecting odd list items.
CSS even Psuedo-Class
The :even pseudo-class is used to select the HTML elements which are at even positions. We can use the :even class with the nth-child() or :nth-of-type() psuedo-class selector to select all the child elements at even places in the list.
Example
In this example, we have used :even psuedo-class to select the list items placed at even places and change their text color.
<html>
<head>
<style>
li:nth-child(even) {
color: #1af0d0;
}
</style>
</head>
<body>
<h3>CSS :even psuedo-class Example</h3>
<p>
In this example, we have used <strong>even</strong>
pseudo-class to change the color of even list items.
</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
</ul>
</body>
</html>
Note: We can also use 2n as an argument for selecting even list items.
Example 2
In this example we have used :odd as well as :even psuedo class to change alternate text colors of list items.
<html>
<head>
<style>
li {
max-width: fit-content;
}
li:nth-child(odd) {
color: #04af2f;
}
li:nth-child(even) {
color: #1af0d0;
}
</style>
</head>
<body>
<h3>CSS :odd and :even psuedo-class Example</h3>
<p>
In this example, we have used <strong>odd</strong>
and <strong>even</strong> pseudo-class to change
the color of alternate list items.
</p>
<ul>
<li>Odd</li>
<li>Even</li>
<li>Odd</li>
<li>Even</li>
<li>Odd</li>
<li>Even</li>
<li>Odd</li>
<li>Even</li>
<li>Odd</li>
</ul>
</body>
</html>
Conclusion
In this article, we learned and understood the use of :even and :odd pseudo-classes with list items in CSS. We use even and odd as argument in nth-child or nth-of-type as they are not independent psuedo classes.
6K+ Views
