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


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

body > header .nav li:last-child a {
    border: none;
| improve this answer | |
  • 1
    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! – Evan Yeung Feb 14 '12 at 21:13
  • @Stephen - Please help us mark the answer as answered if it has helped you. – Evan Yeung Feb 17 '12 at 19:42

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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