[CSS Selector] E:nth-of-type(n)

Using 'selector:nth-of-type', you can apply styles to the nth child element with the same element name. This is generally called a 'pseudo-class'. Does not work in IE8 and below.

The difference from ':nth-child' lies in whether other element types are counted. For example, 'p:nth-child(2)' is not applied if the 2nd child element is not a p element.

Sample Code

style.css

/* 2nd p element inside a div */
div p:nth-of-type(2) { color: red;}

/* Even-numbered p elements */
p:nth-of-type(even) { background-color: #f5f5f5;}

/* Odd-numbered li elements */
li:nth-of-type(odd) { color: #3498db;}

/* Every 3rd li element */
li:nth-of-type(3n) { font-weight: bold;}

/* Hide img elements from the 4th onward */
img:nth-of-type(n+4) { display: none;}

Browser Display Result

div p:nth-of-type(2) { color: red;} /* Makes the 2nd p element inside a div element red. */

<div>
	<p>This is a p element.</p>
	<div>This is a div element.</div>
	<p>This is a p element.</p>
	<div>This is a div element.</div>
</div>

To target all nth child elements of every type, write '*:nth-of-type(n)' or ':nth-of-type(n)'. In this case, elements are counted separately per element type among all child elements. For example, if both p and div elements are present as children, the nth p element and the nth div element will each receive the style.

div :nth-of-type(2) { color: red;} /* Makes the 2nd child element of each type inside a div red. */

<div>
	<div>This is a div element.</div>
	<p>This is a p element.</p>
	<div>This is a div element.</div>
	<p>This is a p element.</p>
</div>

Using 'n' in nth Arguments

When 'n' is used as the argument value for ':nth-child', ':nth-last-child', ':nth-of-type', and ':nth-last-of-type', 'n' represents a sequence of natural numbers including 0. This is the same notation as '2n' for even numbers and '2n+1' for odd numbers in mathematics. Note that elements are counted starting from '1', but 'n' starts from '0'.

The following are examples. When written as '2n':