:nth-last-child() and :nth-last-of-type()

The :nth-last-child() and :nth-last-of-type() pseudo-classes are exactly the same as the :nth-child() and nth-of-type(), except that they start counting at the last element instead of the first.

Test sheet

div#test > *:nth-last-child(3n+1) {
	color: #CB000F;
}

div#test div:nth-last-of-type(5n+2) {
	background-color: #9999ff;
}

Test

The paragraphs count for the :nth-last-child() selector, but not for the :nth-last-of-type() selector. So the offshoot is:

• The second, seventh, twelfth etc. <div> counted from the bottom should be blue.
• The first, fourth, seventh, tenth etc. element (whether <div> or <p>) counted from the bottom should be red.

A script adds the expected colours to every element.

Add an element to the top of the test; alternately a div and a p.