селектор 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 .current-menu-item .sub-menu li a { 
    background: none; 
} 

Answer 3

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

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

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

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