:nth-last-child()

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

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.