I’ve always found list items ‹li› pretty easy to work with, but recently I had an issue where I needed to target the last item in the list, but only if it was an odd number. Pretty easy if the number of list items is fixed, but more of a challenge if the number can vary in length.
Luckily, I found the following CSS solution that did the trick – bonus is that no javascript is needed!
:last-child:nth-child(odd)
For a working example of this, checkout this pen on codepen – click on the list items to remove one so you can see the different styling for the last item come into play.
See the Pen Selecting the last item in a 2 column list of varying length by Liam (@Sweetums66) on CodePen.
Hat tip to Jackie Balzer for originally suggesting this CSS tip which I’ve no longer been able to find.