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 180px. here's my code:

HTML

<ul class="sideNav">   <li><a href="/history.asp">History</a></li>   <li><a href="/mission.asp">Mission</a></li>   <li><a href="/associations.asp">Associations</a></li>   <li><a href="/careers.asp">Careers</a></li> </ul> 

CSS

.sideNav {     margin:0;     padding:0;     border-bottom-right-radius: 10px;     border-bottom-left-radius: 10px;     width:216px;     background-color:#017dc6; }  .sideNav li {     list-style-type:none;     text-align:center;     text-transform:uppercase;     width:180px; }  .sideNav li a {     border-bottom:1px solid #80bee3;     width:180px;     color:#ffffff;     text-decoration:none;     display:block;     padding:18px; } 

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/