The amazing CSS :nth-child() Selector with Examples

css

← PrevNext →

Tools you can use

There’s something very interesting about CSS :nth-child() Selector, which I thought is worth sharing here. The pseudo :nth-child() Selector is used to match elements based on their position in a group of elements. The examples that I have shared here are unique and useful.

CSS :nth-child() Selector Syntax

:nth-child(n) { }

This 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>
    <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;
}
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>
    <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 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 - Yes it worked
• Opera 56+ - Yes it worked
• Edge - Yes it worked

← PreviousNext →