Abakada: Back to Basics > Language References > CSS Properties > Pseudo-Classes > nth-child( ) Pseudo-class

---

Selects child elements according to their position among sibling elements.

:nth-child( index | odd | even | An+B ) {
   property: value;
}

index	Non-negative integer. Matches any element that is the nth child of its parent.
odd	Matches elements whose nth position in a set of siblings is odd: 1, 3, 5, etc.
even	Matches elements whose nth position in a set of siblings is even: 2, 4, 6, etc.
An+B	formula where A is an integer step size, B is an integer offset, and n is all non negative integers, starting from 0.
property	Any valid CSS property.
value	Any of the range of values available to the corresponding property.

The :nth-child( ) pseudo-class applies styles to child elements according to their position among sibling elements within a parent element.

The syntax variations for using the :nth-child( ) pseudo-class is given below.

For example, to match nth child elements at the given index.

/* Selects every third element among any group of siblings */
:nth-child(3) {
   background-color: wheat;
}

/* Selects every third element of <div> siblings */
div:nth-child(3) {
   background-color: beige;
}

/* Selects every third element of list items */
li:nth-child(3) {
   background-color: bisque;
}

To match odd or even child elements of a selector.

div:nth-child(odd) { background-color: beige }

div:nth-child(even) { background: bisque }

To match every element in steps or multiples of 3 ( 3rd, 6th, 9th, etc. ).

:nth-child(3n)

To match every element from the given offset onwards ( 3rd, 4th, 5th, etc. ).

:nth-child(n+3)

To match every element in steps or multiples of 3 plus from the given offset ( 2nd, 5th, 8th, etc. ).

:nth-child(3n+2)

The following demonstrates use of the :nth-child( ) pseudo-class in an embedded stylesheet to set the style of nth-child elements on a page.

• 14.3.1. :nth-child() pseudo-class

:firstChild( )   :last-child( )   :nth-last-child( )   :only-child( )