How do I have a border-bottom on all except the last item

Question

If i have a ul, how do i set a border-bottom on all the li items except the last one? I\'m also trying to make the width of the border 180

Answer 1

Dec 13th, 2018: Note that there is no need to use this solution in today's modern browsers. You should feel free using the answer below mine li:not(:last-child) { border-bottom: 1px solid red; }

Without using JavaScript and not having to support IE7 and below (IE8 fails on the second one) there are three options you can use: :first-child, :lastchild and the + selector:

:first-child

li { border-top: 1px solid red; }
li:first-child { border-top: none; }

:last-child

li { border-bottom: 1px solid red; }
li:last-child { border-bottom: none; }

+ selector

li+li { border-top: 1px solid red; }

The problems arise if you need to support IE8 and your design doesn't allow you to put a border on the top of your elements as opposed to the bottom.

EDIT: The fix to your width issue is that you're adding 180px to 2*18px of the a element, remove the left right padding, and set padding: 18px 0; and you'll be golden. (updated jsfiddle: http://jsfiddle.net/NLLqB/1/)

Here's a jsfiddle of it: http://jsfiddle.net/NLLqB/