[CSS Selector] E:nth-child(n)

'selector:nth-child(n)' applies to the nth child element. Does not work in IE8 and below.

The difference from ':nth-of-type' lies in whether other element types are counted. For example, 'p:nth-of-type(2)' targets the 2nd p element regardless of other elements in between, whereas 'p:nth-child(2)' counts all sibling elements — so if the 2nd child is not a p element, the style is not applied.

Sample Code

div p:nth-child(1) { color: red;} /* Makes the 1st p element inside a div element red. */

Browser Display Result

div p:nth-child(2) { color: red;} /* Makes the 2nd p element inside a div element red. */
div.hoge p:nth-child(2) { color: red;} /* Not applied because the 2nd child inside the 'hoge' element is not a p element. */

<div>
	<p>This is the 1st p element.</p>
	<p>This is the 2nd p element.</p>
</div>
<div class="hoge">
	<p>This is the 1st p element.</p>
	<div>This is the 1st div element.</div>
	<p>This is the 2nd p element.</p>
</div>

Note that when combining id names, class names, or attributes with ':only-child', the browser first checks whether the element is the only child, and then checks whether it matches the specified element name, id name, class name, or attributes. For example, 'p.hoge:only-child' applies only when the sole child element is a p element AND it has the class name 'hoge'.

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':