Question

I have this menu with a slide down submenu:

<ul class="sf-menu">
  <li class="menu-item current-menu-item">
    <a> whatever </a>
    <ul class="sub-menu">
      <li class="menu-item current-menu-item">
      <a> whatever </a>
      <li class="menu-item current-menu-item">
      <a> whatever </a>
    </ul>
  </li>
</ul>

Right now this is my CSS:

.sf-menu .current-menu-item a {
    background: blue url('images/diagonal.png') repeat;
}

This is changing all my menu items with class .current-menu-item, but I don’t want to modify the ones inside the submenu.

How do I change the selector so it doesn’t select LIs inside submenu? Or how do I make a selector to overwrite all LIs inside submenu with background:black?

I cannot modify the html, is it possible to do this?

Answer 1

Use the child selector parent > child.

.sf-menu > .current-menu-item > a {
    background: blue url('images/diagonal.png') repeat;
}