CSS селектор только для элементов в подменю

Question

У меня есть это меню со скользящим подменю:

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

Прямо сейчас это мой CSS:

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

Это меняет все мои пункты меню с помощью класса .current-menu-item, но я не хочу изменять те, которые находятся внутри подменю.

Как изменить селектор, чтобы он не выбирал LI внутри подменю? Или как сделать селектор для перезаписи всех LI внутри подменю с фоном: черный?

Я не могу изменить html, возможно ли это сделать?

Answer 1

Используйте дочерний селектор parent > child.

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

Answer 2

это на самом деле довольно просто:

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

Или, если вы хотите быть более конкретным:

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

Answer 3

Один из способов сделать это - переписать правило для пунктов подменю.

Так

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