CSS selector just for elements in submenu

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 subm开发者_运维问答enu? 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?

Use the child selector parent > child.

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

One way to do this is to overwrite the rule for the submenu items.

So

.sf-menu .current-menu-item .sub-menu li a {
    background: none;
}

its actually quite simple:

.sf-menu .sub-menu  .current-menu-item a {
    background: black;
}

Or alternatively if you want to be more specific:

.sf-menu .current-menu-item .sub-menu .current-menu-item a {
    background: black;
}