Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- 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
The CSS contains various pseudo-classes. The ‘:even’ and ‘:odd’ are among them. It is used to select the alternative child elements. Sometimes, developers require to design alternative elements using the different styles. In such cases, they can use specific CSS selectors to select the even and odd elements.
In this tutorial, we will learn to use the ‘:even’ and ‘:odd’ pseudo-classes with list items.
Using the ‘:odd’ Pseudo-class With List Items
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() CSS method to select all child elements of the list items.
Syntax
Users can follow the syntax below to use the ‘:odd’ pseudo-class to select all list items at odd positions.
li:nth-child(odd) {
/* CSS code */
}
In the above syntax, we used the ‘nth-child()’ CSS method and passed ‘odd’ as a parameter to select odd child elements.
Example
In the example below, we created the list of items containing the ‘red’ and ‘green’ alternative text. We used the ‘li:nth-child(odd)’ selector in CSS to select all odd list items. In the output, users can observe the red color of the list items placed at odd positions.
<html>
<head>
<style>
li:nth-child(odd) {
color: #ff0000;
}
</style>
</head>
<body>
<h3>Using the <i> :odd pseudo class </i> to select odd elements in the list items</h3>
<ul>
<li> red </li>
<li> green </li>
<li> red </li>
<li> green </li>
<li> red </li>
<li> green </li>
<li> red </li>
<li> green </li>
<li> red </li>
</ul>
</body>
</html>
Example
In the example below, we created a list related to foods and gave the ‘foods’ class name. We used the ‘.foods :nth-child(2n + 1)’ CSS selector to select odd items. Here, users can observe the space between the class name and the nth-child() method. Also, we passed the ‘2n+1’ as a parameter rather than odd, as both work the same.
In the output, we can see that odd elements are styled properly.
<html>
<head>
<style>
.foods :nth-child(2n + 1) {
padding: 5px;
margin: 5px;
color: blue;
background-color: aqua;
border: 3px solid red;
width: 300px;
}
</style>
</head>
<body>
<h3>Using the <i> :odd pseudo class </i> to select odd elements in the list items</h3>
<ul class = "foods">
<li> Pizza </li>
<li> Burger </li>
<li> Pasta </li>
<li> Noodles </li>
<li> Sandwich </li>
<li> Hot Dog </li>
<li> French Fries </li>
<li> Ice Cream </li>
<li> Cake </li>
<li> Donuts </li>
</ul>
</body>
</html>
Using the ‘:even’ Pseudo-class With List Items
The ‘:even’ pseudo-class is used to select the elements which are placed at even position. We need to use it with the nth-child() method.
Syntax
Users can follow the syntax below to use the ‘even’ pseudo-class with list items.
li:nth-child(even) {
/* CSS code */
}
In the above syntax, users can write the CSS code in the declaration block to apply it to even elements.
Example
In the example below, we created the list item. It contains the ‘pink’ and ‘blue’ alternative text.
We selected the list item in the CSS and used the nth-child(even) method to apply a specific style to the even list items. In the output, users can observe that it changes the color of the text placed at an even position.
<html>
<head>
<style>
li:nth-child(even) {
color: blue;
}
</style>
</head>
<body>
<h3>Using the <i> :even pseudo class </i> to select even elements in the list items</h3>
<ul>
<li> pink </li>
<li> blue </li>
<li> pink </li>
<li> blue </li>
<li> pink </li>
<li> blue </li>
<li> pink </li>
<li> blue </li>
</ul>
</body>
</html>
Example
We created the list item in the example below containing the car brand names. After that, we used the ‘.cars :nth-child(2n)’ CSS selector to select the even elements in the list item. Here, ‘even’ is replaced with ‘2n’. However, it gives the same output as ‘even’.
<html>
<head>
<style>
.cars :nth-child(2n) {
padding: 5px;
margin: 5px;
color: red;
background-color: green;
}
</style>
</head>
<body>
<h3>Using the <i> :even pseudo class </i> to select even elements in the list items</h3>
<ul class = "cars">
<li> Audi </li>
<li> BMW </li>
<li> Mercedes </li>
<li> Jaguar </li>
<li> Porsche </li>
<li> Verna </li>
<li> Nexon </li>
</ul>
</body>
</html>
Users learned to use the ‘:even’ and ‘:odd’ pseudo-classes with the list items. As ‘:even’ and ‘:odd’ pseudo-classes are not supported by some browsers, we require to use them with the nth-child() method.
2K+ Views
