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

'selector:nth-last-child(n)' applies to the nth child element counting from the last. Equivalent to ':first-child :last-child' or ':nth-child(1)', but has lower specificity (priority) than those. Does not work in IE8 and below.

Sample Code

div p:nth-last-child(1) { color: red;} /* Makes the 1st p element from the last inside a div element red. */
div.hoge :nth-last-child(2) { color: blue;} /* Makes the 2nd element from the last inside the div element with class name 'hoge' blue. */

Browser Display Result

div p:nth-last-child(1) { color: red;} /* Makes the 1st p element from the last inside a div element red. */
div.hoge :nth-last-child(2) { color: blue;} /* Makes the 2nd element from the last inside the div element with class name 'hoge' blue. */
div.hoge1 :nth-last-child(3) { color: blue;} /* Not applied because there is no 3rd element from the last inside the div element with class name 'hoge1'. */

<div>
	<p>This is the 1st p element.</p>
	<p>This is the 2nd p element.</p>
</div>
<div class="hoge">
	<div>This is the 1st div element.</div>
	<div>This is the 2nd div element.</div>
</div>
<div class="hoge1">
	<div>This is the 1st div element.</div>
	<div>This is the 2nd div element.</div>
</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':