:nth-child()

:nth-child(an+b)- pseudo-class

The :nth-child(n) is a CSS pseudo-class defined in the Selectors Level 3. It allows you to select one or multiple elements according to their positions in their parent element.

The pattern for numeric position for selected children is an + b, e.g. :

1n+0 – would match every child element,

3n+1 – would match child elements 1, 4, 7, 10

2n+0 – would match child elements 2, 4, 6, 8. This expression is equal to even keyword.

2n+1 – would match child elements 1, 3, 5, 7. This expression is equal to odd keyword.

a, b – integers

n is a letter that takes numbers 0, 1, 2, 3, …

The index of an element’s first child is 1.

Syntax:

p:nth-child(an+b) {
   style properties;
}

Examples

<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
    <li>Six</li>
    <li>Seven</li>
    <li>Eight</li>
    <li>Nine</li>
    <li>Ten</li>
</ul>

Every odd element of the parent element.

ul li:nth-child(2n+1){
    background:coral;
}
ul li:nth-child(odd){
    background:coral;
}

Selected elements: 1, 3, 5, 7, 9.

2 * 0 + 1 = 1

2 * 1 + 1 = 3

2 * 2 + 1 = 5


ul li:nth-child(3){
    background:coral;
}

Selected elements: 3.


 

ul li:nth-child(-n+4){
    background:coral;
}

Selected elements: 1,2,3,4. The element is one of the first four children of its parent.

-0 + 4 = 4

-1 + 4 = 3

-2 + 4 = 2

-3 + 4 = 1


 

The Html for exmaple:

<div class="nth-child">
    <p>This is the first p element</p>
    <p>The second a p element</p>
    <p>The p element number 3</p>
    <p>And four.</p>
    <div>This is a div element. A child has numer 5.</div>
    <p>This is a p element again with number 6.</p>
    <p>And a p element again with number 7</p>
    <div>And this is a div element - 8</div>
</div>

The general CSS property for example:

.nth-child {
	border:1px solid #4C60A6;
	margin:5px;
	padding:3px;
}

Example 1.

.nth-child-1 p:nth-child(2n+1) {
	background:#BEFAB6;
}

The selector :nth-child(2n+1) used on a p element, selects 1, 3, 7 p elements which are children of its parent element. The div elements are not selected.

This is first p element

The secon p element

The p element number 3

And four.

This is an div element. A child has numer 5.

This is an p element again with number 6.

And an p element again with number 7

And this is an div element – 8

Example 2

.nth-child-2 p:nth-child(-n+6) {
	background:#4C60A6;
}

The selector :nth-child(-n+6) used on a p element, selects first six elements which are children of its parent element. The div elements are not selected.

This is first p element

The secon p element

The p element number 3

And four.

This is an div element. A child has numer 5.

This is an p element again with number 6.

And an p element again with number 7

And this is an div element – 8

 Related

nth-last-child()

Resources

 

 

Browser compatibility

:nth-child()

Internet Explorer
9.0
Firefox
3.5
Chrome
1.0
Safari
3.1
Opera
9.5
Mobile
Safari Mobile
3.1
Android
2.1
IE Phone
9.0
Opera Mobile
9.5