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

One way: You can override for the last one using a rule like below with :last-child (Since you tagged css3):

.sideNav li:last-child a {
    border-bottom:0px; /*Reset the border for the anchor of last li of this ul*/
}

Demo

There are polyfills available for IE8, but if you can provide a classname for the last one and apply rule to it to reset the style would be of better support, rather than using css3 (if your intention is to support older browsers as well).

if you are using scripting language like jquery you can easily add a class to the last child as jquery takes care of cross-browser compatibility.

Answer 2

Use :not(:last-child).

.sideNav li:not(:last-child) a {
    /* your css here */
}

Answer 3

You can also use in-line CSS to correct this problem.

<li><a style="border-bottom:none" href="/careers.asp">Careers</a></li>

This will remove the border from the "Careers" link. Note that it will only work if you put that code in the <a> tag since that is what the border is being applied to, not the <li>.

The downside of this is that if you add something to the list, then the second-to-last list item will have no bottom border, and the last will.

Not the best solution, but an alternative one that accomplishes the same thing. Cheers!

Answer 4

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/