CSS3 :nth-of-type() Selector

Example

Specify the background color of each p element that matches the second sibling of the same type:

p:nth-of-type(2)
{
background:#ff0000;
}

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

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

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

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

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

Odd and even are keywords that can be used to match child elements whose index is odd or even (the index of the first child is 1).

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

p:nth-of-type(odd)
{
background:#ff0000;
}
p:nth-of-type(even)
{
background:#0000ff;
}

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

Here, we specify a background color for all p elements whose index is a multiple of 3:

p:nth-of-type(3n+0)
{
background:#ff0000;
}

other extensions