CSS nth-child() Selector Example

← PrevNext →

There’s something very interesting about CSS :nth-child() Selector, which I thought, is worth sharing here. This pseudo-selector, nth-child(), was introduced in CSS3. It helps find an element (or elements) from a list of elements that are the nth child of its parent.

CSS :nth-child() Selector Syntax

:nth-child(n) { }

This pseudo-selector takes a parameter, which can be a number, keyword (like odd or even) and an expression or formula. For example,

<!DOCTYPE html>
<html>
<head>
    <title>CSS :nth-child Selector Example</title>
    <style>
        div p:nth-child(even) 
        {  
            color: #ff0000;
            font: 14px Calibri;
        }
        
        div p:nth-child(odd) 
        {  
            font: 17px Calibri;
        }
    </style>
</head>
<body>
    <div>
        <p>Para 1</p>
        <p>Para 2</p>
        <p>Para 3</p>
        <p>Para 4</p>
        <p>Para 5</p>
    </div>
</body>
</html>
Try it

I have defined the nth-child() selector twice inside the <style> tag in the above markup. The first selector takes the keyword even as parameter and second takes the keyword odd. It will find elements matching each element’s index and accordingly change the colour and font. The even number elements will show in colour red and odd number elements will have a default colour (say black).

See Browser Compatibility

You can also use a number (any number) as parameter with the nth-child() selector like this.

div p:nth-child(2)
{  
    color: #ff0000;
    font: 14px Calibri;
}
Try it

It would now change the colour of the second <p> element inside its parent element.

Using Expressions with nth-child

You can use an expression or a formula, as a parameter, inside the :nth-child() selector. For example,

div p:nth-child(2n+1)
{  
    color: #ff0000;
    font: 14px Calibri;
}
Try it

How does this work? The formula 2n+1 can be derived as,

(2xn) + 1 (its BODMAS in Math)

That is 2 multiplied by n and here n is a counter that starts with 0, plus 1.

(2 x 0) + 1
(2 x 1) + 1
(2 x 2) + 1

and so on.

You can do whatever you want using nth-child(), like change the padding or add borders of selective elements, change alignments or colours etc.

Using Multiple :nth-child() Selectors

This is interesting. You can use multiple nth-child selectors as a range to find and assign styles to child elements. For example, I have a list of <p> elements and I want to assign different styles to a range of elements, lets say between 2nd and 5th elements.

div p:nth-child(n+2):nth-child(-n+5)
{  
    color: #ff0000;
    font: 14px Calibri;
}
Try it

Change width of div elements using nth-child

Here’s another :nth-child() selector example, which I myself have used in my blog, to change the width of <div> elements to adjust the look and feel.

<!DOCTYPE html>
<html>
<head>
    <title>CSS :nth-child Selector Example</title>
    <style>
        .container {width:100%; font:16px Calibri;} 
        h3 {border-bottom: solid 1px #eee;}
        
        ul {list-style:none; margin:0; padding:0;}
        ul li {display:list-item; padding:0; margin:0; width:50%; float:left;} 
        
        .container div {width:49%; float:left; margin-right:1%;}

        .container div:nth-child(1) {width:25%;} 
        .container div:nth-child(2) {width:70%; float:right;}
    </style>
</head>
<body>
    <div class="container">
        <div>
            <h3>Header One</h3>
            <ul>
                <li>Content 1</li>
                <li>Content 2</li>
                <li>Content 3</li>
                <li>Content 4</li>
            </ul>
        </div>
        <div>
            <h3>Header Two</h3>
            <ul>
                <li>Eurasian Collared-Dove (Dove)</li>
                <li>Hairy Woodpecker (Woodpecker)</li>
                <li>White-tailed Hawk (Hawk)</li>
                <li>Brewer's Sparrow (Sparrow)</li>
                <li>Lewis's Woodpecker (Woodpecker)</li>
                <li>American Kestrel (Hawk)</li>
            </ul>
        </div>
    </div>
</body>
</html>
Try it

I have two <div> elements inside a container (another <div>). Initially, I have defined the width of both the <div> as 49%.

.container div { width:49%; float:left; margin-right:1%; }

However, when I execute the code, the second <div> (under Header Two) becomes clumsy, since the details (name of the birds) are lengthy. Therefore, I have to adjust it in such a way that every name is in the same row (does not extend to the next row). I have assigned individual width to each element using the :nth-child() selector.

.container div:nth-child(1) {width:25%;}
.container div:nth-child(2) {width:70%; float:right;}

Browser Compatibility

The pseudo-selector :nth-child(), works fine with modern browsers, it unfortunately do not work nicely with some old IE versions (before 9.0).

IE 10 - Yes it worked
Firefox 62+ - Yes it worked
Chrome (any) - Yes it worked
Opera 56+ - Yes it worked

← PreviousNext →


Like this Article? Subscribe now, and get all the latest articles and tips, right in your inbox.
Delivered by FeedBurner