Remove border from last navigation list item - html

Question

I am trying to complete a navigation list that is contained within a div.
I have it set to have a border on the right of each item to space out each item. I am looking to have this border only on the middle items and not on the last item.
HTML:
<div id="container-navigation">
<ul id="navigation">
<li>home</li>
<li>about</li>
<li>solutions</li>
<li>training</li>
<li>payments</li>
<li>contact</li>
</ul>
</div>
CSS:
#navigation li a {
color: #ffffff;
line-height: 22px;
font-size: 11px;
text-decoration: none;
padding: 5px 15px 6px 15px;
border-right: 1px solid #ffffff;
}
What would be the best way to accomplish this? Give the last item a unique class and create another CSS entry?

Answer 1

As suggested by thgaskell, here is one way of doing it:
#navigation li a {
color: green;
line-height: 22px;
font-size: 11px;
text-decoration: none;
padding: 5px 15px 6px 15px;
border-right: 1px solid red;
}
#navigation li:last-child a {
border-right: none;
}
Demo at: http://jsfiddle.net/audetwebdesign/G3mD9/
Note: the last-child pseudo-class is supported for IE9+, so a bit more limited than first-child which is good for IE7+.

Answer 2

If it was me, I would move the border to the left instead of the right:
#navigation li a {
border-left: 1px solid #ffffff;
}
And then I would use first-child as it is has good cross browser compatibility.
#navigation li:first-child a {
border-left: 0 none;
}

Answer 3

If you need to support older browsers (IE7+, etc...) you should flip the border from the right side to the left side, so that you can use the css selector first-child.
Change your current css from this:
#navigation li a {
color: #ffffff;
line-height: 22px;
font-size: 11px;
text-decoration: none;
padding: 5px 15px 6px 15px;
border-right: 1px solid #ffffff;
}
To:
#navigation li a {
color: #ffffff;
line-height: 22px;
font-size: 11px;
text-decoration: none;
padding: 5px 15px 6px 15px;
border-left: 1px solid #ffffff;
}
#navigation li:first-child a {
border-left: none;
}
EXAMPLE FIDDLE

Answer 4

Try the :last-child Selector, the easy way.
#navigation li a:last-child {
border-right: none;
}

Answer 5

Create new id or class name to last list item, then
give the style like that,
#id_name a { border-right:none !important; }

Answer 6

As an alternative to :first-child, you can also use the adjacent sibling selector to get IE7+ support. It needs changing to border-left from border-right like other solutions too though.
#navigation li a {
color: #ffffff;
line-height: 22px;
font-size: 11px;
text-decoration: none;
padding: 5px 15px 6px 15px;
}
#navigation li + li a {
border-left: 1px solid #ffffff;
}