WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I'm have a horizontal top menu with a solid border on the right hand side.

<?php wp_nav_menu( array('theme_location' => 'primary', 'container' => '', 'menu_class' => 'nav', 'fallback_cb' => '') ); ?> 

My CSS looks like this:

body > header .nav li a {
                background: none;
                text-decoration: none;
                font-family: 'Open Sans', sans-serif;
                font-size: 13px;
                color: #000000;
                text-shadow: none;
                text-transform: uppercase;
                border-right: solid 1px #000000;

Now, this works fine but as expected it creates a border on the right hand side of the my last menu item. This does not look good, is there anyway to specifically identify the last item in the menu so I can put a 'border: none' style on it.

Regards, Stephen

share|improve this question

You can use CSS Selectors to target the last menu item.

body > header .nav li:last-child a {
    border: none;
share|improve this answer
Actually, it should probably be body > header .nav li:last-child a, since there's only one a in each li :) – helenhousandi Feb 14 '12 at 20:47
Very good pick up helenhousandi! – imHavoc Feb 14 '12 at 21:13
Perfect imHavoc, thanks very much. – Stephen Feb 16 '12 at 11:16
+1 - saved my day :-) – user13279 Feb 17 '12 at 18:28
@Stephen - Please help us mark the answer as answered if it has helped you. – imHavoc Feb 17 '12 at 19:42

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.