4

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><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 accomplish this? Give the last item a unique class and create another CSS entry?

Improve this question
1
  • What browsers do you want to support? Commented Aug 31, 2013 at 0:55

6 Answers 6

Reset to default
2

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+.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

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; }
Improve this answer

Comments

1

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

Improve this answer

1 Comment

Good point about IE7+ support, in contrast to last-child which is only good for IE9+ (up vote :)
0

Try the :last-child Selector, the easy way.

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

3 Comments

It should be #navigation li:last-child a.
yes, you're right but it would not remove the border because its in the a tag.
It is applied to the a. But you need to select the last li, not the last a of every li (which applies to every a since there's only one a in every li.
0

Create new id or class name to last list item, then give the style like that,

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

1 Comment

You don't need the !important option, the id by itself will increase the rule specificity enough to over ride the primary CSS rule.
0

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; }
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.