Skip to content
Related Articles

Related Articles

Improve Article

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

  • Last Updated : 02 Jul, 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>Compuyer Networks</li>
    <li>C Programming</li>
</body>
 
</html>                   
  • Output: 

Supported Browsers:

  • Google Chrome 4.0
  • Internet Explorer 9.0 
  • Firefox 3.5
  • Opera 9.6
  • Safari 3.2



My Personal Notes arrow_drop_up
Recommended Articles
Page :