Remove border from last item in navigation list

Question

I am trying to complete a navigation list that is contained in a div.

I found that each element has a border to the right of each element. I am looking for this border only for middle elements, not for the last element.

HTML:

<div id="container-navigation"> <ul id="navigation"> <li><a href="index.html" target="_self">home</a></li> <li><a href="aboutus.html" target="_self">about</a></li> <li><a href="solutions.html" target="_self">solutions</a></li> <li><a href="training.html" target="_self">training</a></li> <li><a href="payments.html" target="_blank">payments</a></li> <li><a href="contact.html" target="_self">contact</a></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 achieve this? Give the last element a unique class and create another CSS entry?

Answer 1

As suggested by thgaskell, here is one way to do this:

 #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 the bit is more limited than first-child , which is good for IE7 +.

Answer 2

If it were me, I would move the border to the left, and not to the right:

 #navigation li a { border-left: 1px solid #ffffff; } 

And then I would use first-child , since it has good browser compatibility.

 #navigation li:first-child a { border-left: 0 none; } 

Answer 3

If you need to support older browsers (IE7 +, etc.), you must flip the border from the right side to the left side so that you can use the css first-child selector.

Change the current css as follows:

 #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; } 

FIDDLE EXAMPLE

Answer 4

Try: last-child selector, easy way.

 #navigation li a:last-child { border-right: none; } 

Answer 5

Create a new identifier or class name for the last item in the list, then give a style similar to this,

 #id_name a { border-right:none !important; } 

Answer 6

As an alternative to: first-child, you can also use the adjacent selector to get IE7 + support. It needs a transition to the border to the left of the border to the right, like other solutions, 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; }