:nth-of-type()

:nth-of-type – pseudo-class | Selectors Level 3

The :nth-of-type(an+b) allows you to select one or multiple elements according to their positions in their parent element. It works similar to nth-child() pseudo-class but with :nth-of-type pseudo-class you select the same type of tag. The :nth-of-type() takes only designated children elements, counts them and matches to the given pattern (an+b).

The pattern for numeric position for selected children is an + b, e.g. :

1n+0 – would match every child element,

3n+1 – would match child elements 1, 4, 7, 10

2n+0 – would match child elements 2, 4, 6, 8. This expression is equal to even keyword.

2n+1 – would match child elements 1, 3, 5, 7. This expression is equal to odd keyword.

a, b – integers

n is a letter that takes numbers 0, 1, 2, 3, …

The index of an element’s first child is 1.

Syntax

element:nth-of-type(an+b){
    style properties
}

Examples

The HTML code

<div>
    <div>div - 1, child 1</div>
    <div>div - 2, chld 2</div>
    <p>paragraph - 1, child 3</p>
    <p>paragraph - 2, child 4</p>
    <p>paragraph - 3, child 5</p><br/>
    <div>div - 3, child - 6</div>
</div>

Example 1

div p:nth-child(2)  {
	background:#FFB7C5;
}

No element is selected because the second child is div not p

div – 1, child 1
div – 2, chld 2

paragraph – 1, child 3

paragraph – 2, child 4

paragraph – 3, child 5

div – 3, child – 6

Example 2

div p:nth-child(3)  {
	background:#FFB7C5;
}

The third element is selected which is the first p paragraph element.

div – 1, child 1
div – 2, chld 2

paragraph – 1, child 3

paragraph – 2, child 4

paragraph – 3, child 5

div – 3, child – 6

Example 3

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

The third p paragraph is slelected, no third child of the parent element.

div – 1, child 1
div – 2, chld 2

paragraph – 1, child 3

paragraph – 2, child 4

paragraph – 3, child 5

div – 3, child – 6

Related

nth-child()

Resources

Browser compatibility

:nth-of-type()

Internet Explorer
9.0
Firefox
3.5
Chrome
1.0
Safari
3.1
Opera
9.5
Mobile
Safari Mobile
works
Android
works
Chrome Mobile
works
IE Phone
works
Opera Mini
works
Opera Mobile
works