[CSS Selector] E:nth-last-of-type(n)
Using 'selector:nth-last-of-type(n)', you can apply styles to the nth child element of the same element type counting from the last. This is generally called a 'pseudo-class'. Does not work in IE8 and below.
The difference from ':nth-last-child(n)' lies in whether other element types are counted. For example, 'p:nth-last-child(2)' requires the 2nd element from the last to be a p element — otherwise it is not applied. But 'p:nth-last-of-type(2)' targets the 2nd p element from the last, regardless of other elements in between.
Sample Code
style.css
/* Last p element (1st from the end) */
div p:nth-last-of-type(1) { color: red;}
/* 3rd p element from the end */
div p:nth-last-of-type(3) { color: blue;}
/* Even-numbered li elements counting from the last */
li:nth-last-of-type(even) { background-color: #f5f5f5;}
/* Last 2 img elements */
img:nth-last-of-type(-n+2) { opacity: 0.5;}
/* All h2 elements except the last */
h2:nth-last-of-type(n+2) { border-bottom: 1px solid #ccc;}
Browser Display Result
div p:nth-last-of-type(1) { color: red;} /* Makes the 1st p element from the last inside a div element red. */
div p:nth-last-of-type(3) { color: blue;} /* Makes the 3rd p element from the last inside a div element blue. */
<div> <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>This is the 2nd div element.</div> <p>This is the 3rd p element.</p> <div>This is the 3rd div element.</div> </div>