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

1 Answer 1


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

body > header .nav li:last-child a {
    border: none;
  • 1
    Actually, it should probably be body > header .nav li:last-child a, since there's only one a in each li :) Feb 14, 2012 at 20:47
  • Very good pick up helenhousandi!
    – Evan Yeung
    Feb 14, 2012 at 21:13
  • @Stephen - Please help us mark the answer as answered if it has helped you.
    – Evan Yeung
    Feb 17, 2012 at 19:42

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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