Selecting the last two elements with CSS
nth-child()
is a very handy pseudo-selector, but sometimes you need to approach things from the other end, starting from the last item. That's where nth-last-child
comes to the rescue.
nth-last-child
works pretty much the same way as nth-child
does except it runs in relation to the last-child.
For instance nth-last-child(odd)
selects every odd number starting from the very last number and counting back from there.
Recently however I was in a scenario where I needed to select only the last two items in a list. Thats where I had to get a little creative and came up with this solution:
li:nth-last-child(-n+2)
The "-n" does the magic here by flipping the counting around. So it counts down from two (which is the "+2" part) and stops after 1, instead of starting at 1 and counting up (and thus selecting every element in the list).
If you are interested in learning more about nth-last-child, mozilla has some nice documentation and also css-tricks.com