CSS Tip – Selecting the last (odd numbered) item in a list of varying length

Posted

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.

Leave a Reply

Your email address will not be published. Required fields are marked *