CSS last-child causing unexpected results

Question

I am using a Wordpress reset theme and designing a child theme from scratch. The menu (nav) of this site will include drop down menus, which are working. The following is the menu structure (auto generated in WP):

<nav id="nav" role="navigation">
  <div class="menu-menu-1-container">
    <ul id="menu-menu-1" class="menu">
      <li id="menu-item-20" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-4 current_page_item menu-item-20"><a href="http://somesite.com/">Home</a></li>
      <li id="menu-item-21" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-21"><a href="http://somesite.com/about-us/">About Us</a></li>
      <li id="menu-item-22" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-22"><a href="http://somesite.com/admissions/">Admissions</a>
        <ul class="sub-menu">
          <li id="menu-item-27" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-27"><a href="http://somesite.com/sample-page/">Sample Page</a></li>
          <li id="menu-item-28" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-28"><a href="http://somesite.com/sample-page-2/">Sample Page 2</a></li>
        </ul>
      </li>
      <li id="menu-item-24" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-24"><a href="http://somesite.com/contact-us/">Contact Us</a></li>
    </ul>
  </div>
</nav>

Everything is working fine. With that and with the dropdown. I have this in the CSS which works but also puts a right border on the last menu item (CONTACT US):

header #nav li a
{
    color: #000;
    text-decoration: none;
    border-right: 1px solid #000;
    margin-right: 9px;
    padding: 0px 9px 0px 0px;       
}

However, when I add this:

header #nav ul li a:last-child
{
    border-right: none;
    margin-right: 0px;
    padding: 0px;
}

I get this:

It's like it affects every "a" except for the one with a nest UL under it.

Any thoughts on why this is happening and how to correct it? I only want to affect CONTACT.

Thanks! Chris

Answer 1

The :last-child you used is referring to "the last a in every li". You need to use the following instead:

header #nav ul li:last-child a
{
    border-right: none;
    margin-right: 0px;
    padding: 0px;
}

Answer 2

Use:

#nav > .menu-menu-1-container > ul > li:last-child > a{
    border-right: none;
    margin-right: 0px;
    padding: 0px;
}

> is used to refer the direct child only.

or

#menu-item-24 > a{
    /* css style here */
}

if the above id is unique.