CSS last-child causing unexpected results

0 Views

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):

Read More
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:
Image after adding last-child

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

Post Views: 0

Related posts

Leave a Reply

2 comments

  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;
}

  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.