CSS | :nth-child() Selector

Last Updated : 07 Jan, 2019

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.

Syntax:

:nth-child(number) {
    //CSS Property
}

Where number is the argument that represents the pattern for matching elements. It can be odd, even or in a functional notation.

odd: It represents elements whose position is odd in a series: 1, 3, 5, etc.
even: It represents the elements whose position is even in a series: 2, 4, 6, etc.
functional notation (<An+B>): It represents elements whose position of siblings matches the pattern An+B, for every positive integer or zero value of n.

Example-1: In this example every odd paragraph is selected. Formula used is 2n+1 i.e 1, 3, 5, etc paragraphs are selected.

<!DOCTYPE html>
<html>
    <head>
        <title>CSS :nth-child Selector</title>
        <style> 
            p:nth-child(2n+1) {
              background: green;
              color: white;
            }
        </style>
    </head>
    <body style = "text-align:center">
        <h1 style = "color:green;">
            GeeksforGeeks
        </h1>
        <h2>
            CSS :nth-child Selector
        </h2>
      
        <p>A computer science portal for geeks.</p>
        <p>Geeks classes an extensive classroom programme.</p>
          
    </body>
</html>

Output:
nthchild
Example-2: In this example every even <li> is selected i.e. 2, 4, 6, etc.

<!DOCTYPE html>
<html>
    <head>
        <title>CSS :nth-child Selector</title>
        <style> 
        li {
            width: 30%;
        }
            li:nth-child(even) {
              background: green;
              color: white;
            }
        </style>
    </head>
    <body style = "text-align:center">
        <h2>
            CSS :nth-child Selector
        </h2>
        <p>Sorting Algorithms</p>
        <ul>
        <li>Quick sort.</li>
        <li>Merge sort.</li>
        <li>Insertion sort.</li>
        <li>Selection sort.</li>
          
        </ul>
          
    </body>
</html>

Output:
nthchild

Supported Browsers: The browser supported by :nth-child() selector are listed below:

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

Attention reader! Don’t stop learning now. Get hold of all the important DSA concepts with the DSA Self Paced Course at a student-friendly price and become industry ready.

My Personal Notes

Related Articles