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

---

Matches elements based on their position among siblings of the same type.

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

index	Non-negative integer. Matches any element that is the nth child of its parent’s type.
odd	Matches elements whose nth position in a set of siblings of the same type is odd: 1, 3, 5, etc.
even	Matches elements whose nth position in a set of siblings of the same type 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-of-type pseudo-class applies styles to matching elements based on their position among siblings of the same type.

:nth-of-type is specified with a single argument, which represents the pattern for matching elements as given in the possible values above.

The syntax variations for using the :nth-of-type pseudo-class is as follows.

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

/* first paragraph */
p:nth-of-type(1) {
   font-weight: bold;
}

To match odd or even child elements of the same type of a given selector.

tr:nth-of-type(odd) { background-color: beige }

tr:nth-of-type(even) { background: bisque }

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

div:nth-of-type(3n)

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

div:nth-child(n+3)

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

div:nth-child(3n+2)

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

• 14.4.2. :nth-last-of-type() pseudo-class

:first-of-type   :last-of-type   :nth-last-of-type( )   :only-of-type