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

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 effect only the odd index number list.
    Syntax:

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

    Example:



    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>                                

    chevron_right

    
    

    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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>                                   

    chevron_right

    
    

    Output:

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

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>                    

    chevron_right

    
    

    Output:



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.