Select the Last n Children in CSS

In CSS, :nth-child refers to the child referenced from the beginning of the parent. Take an example:

<ul>
  <li>one</li>
  <li>two</li>
  <li>three</li>
  <li>four</li>
</ul>

If you were to select :nth-child(2), then the second <li> is selected. So this:

ul:nth-child(2) {
  color: red;
}

Would make two red.

Moving in the other direction is :nth-last-child, which moves backwards. So, this:

ul:nth-last-child(2) {
  color: red;
}

Would make three red.

Now, let's say we wanted to make the last two elements red. We can use -n and move backwards from the end. So:

ul:nth-last-child(-n + 2) {
  color: red;
}

Affects both three and four.

The iterator follows the pattern of an+b. If you want to learn more about how this iteration logic works, Chris Coyier has a great explanation.