Use of :even and :odd pseudo-classes with list items in CSS

Last Updated : 16 Dec, 2021

The:nth-child() selector in CSS is used to match the elements based on their position in a group of siblings. It matches every element that is the nth-child. The: even and: odd pseudo-class is used with the list of items such as paragraph, article items which is basically a list content.

odd: The use of odd pseudo-class in any list item that will affect only the odd index number list.
Syntax:

li:nth-child( odd ) {
    // CSS Property   
}

Example:

HTML

<!DOCTYPE html>
<html>
    
<head>
    <title>
        CSS :nth-child(odd) Selector
    </title>
    
    <!-- Style to uses :nth-child(odd)
            Selector -->
    <style> 
        li:nth-child(odd) {
            background: green;
            font-size: 24px;
            color:white;
        }
    </style>
</head>

<body>
    <li>GeeksforGeeks</li>
    <li>A Computer Science portal</li>
    <li>Welcome to GeeksforGeeks</li>
</body>

</html>

Output:

even: The use of even pseudo-class in any list item that will effect only the even index number list.
Syntax:

li:nth-child( even ) {
    // CSS Property
}

Example:

HTML

<!DOCTYPE html>
<html>
    
<head>
    <title>
        CSS :nth-child(even) Selector
    </title>
    
    <!-- Style to uses :nth-child(odd)
            Selector -->
    <style> 
        li:nth-child(even) {
            background: green;
            font-size: 24px;
            color:white;
        }
    </style>
</head>

<body>
    <li>GeeksforGeeks</li>
    <li>A Computer Science portal</li>
    <li>Welcome to GeeksforGeeks</li>
</body>

</html>

Output:

Example: This example uses both :even and :odd pseudo-class selector.

HTML

<!DOCTYPE html>
<html>
    
<head>
    
    <style> 
        li:nth-child(odd) {
            background: green;
            font-size: 36px;
            color:white;
        }
        li:nth-child(even) {
            background: Blue;
            font-size: 36px;
            color:yellow;
        }
    </style>
</head>

<body>
    <h1>GeeksforGeeks</h1>
    
    <h2>:even and :odd pseudo-class</h2>
    
    <li>Data Structure</li>
    <li>Operating System</li>
    <li>Computer Networks</li>
    <li>C Programming</li>
</body>

</html>