Pseudo-Class - :nth-child()

Pattern:

:nth-child(Nth)

The argument Nth is of the following format:

• ODD

​Odd numbers, the same signification as 2n+1

• EVEN

​​Even, the same as 2n

• [-|+]?[0-9]+

​E.g., 0, 6, +7

• [-|+]?[0-9]+N[[-|+]?[0-9]+]?

​E.g., 5n, 2n+1, -2n+1

 

Definition:

The :nth-child(Nth) pseudo-class represents every element that is the Nth child of its parent element.

 

Examples:

Style every odd row of an HTML table

tr:nth-child(odd) { background-color: aquamarine; }

 

Style every <li> element that is one of the 1st, 6th, 11th, etc, child element of its parent

li:nth-child(5n+1) { border-bottom: 1px solid chartreuse; }