CSS3 `:nth-of-type()` Selector

Example

Specify the background color for the second sibling element of each p element within the same type:

The :nth-of-type(n) selector matches the nth sibling element within the same type.

n can be a number, a keyword, or a formula.

Tip: See the :nth-child() selector. This selector matches the nth child element within the parent. Look at the :nth-child() selector.

The numbers in the table specify the first browser version that supports the property.

Selector
:nth-of-type()	4.0	9.0	3.5	3.2	9.6

Odd and even keywords can be used to match child elements with odd or even indices (the first child node is 1).

Here, we specify two different background colors for odd and even p elements:

Using the formula (an+b). Description: a represents the size of a cycle, n is a counter (starting from 0), and b is the offset.

Here, we specify the background color for all p elements whose indices are multiples of 3: