селектор CSS, который соответствует родительским пустого элемента

Question

У меня есть такой HTML код

<li data-bind="attr: { class: MenuItem.CssClass, 'data-Id': MenuItem.Id }"> 
    <div class="subMenuActions"> 
     <i class="icon-caret-right" /> 
     <i class="icon-caret-down" /> 
    </div> 
    ... 
    <ul class="subMenu"></ul> 
</li> 

Я хочу сделать селектор для элементов i в div.subMenuActions, который будет проверять, если ul.subMenu пуст.

Я знаю, что я могу проверить, если ul.subMenu пуст, используя селектор CSS ul.subMenu:empty, но мне нужно, чтобы скрыть i.icon-caret-down, i.icon-caret-right если ul.subMenu пуст.

Пожалуйста, не отвечайте на вопросы JS.

Answer 1

Невозможно выбрать previous element sibling или parent element с CSS на уровнях 1-3. Как говорит Мишик, вы можете выбирать только следующих братьев и сестер.

В вашем случае, если вы изменить порядок элементов в HTML, и вы знаете высоту ul.submenu элемента, вы можете использовать это решение:

<li data-bind="attr: { class: MenuItem.CssClass, 'data-Id': MenuItem.Id }"> 
    <ul class="subMenu"></ul> 
    <div class="subMenuActions"> 
     <i class="icon-caret-right"/> 
     <i class="icon-caret-down"/> 
    </div> 
    ... 
</li> 

затем применить этот CSS:

li { 
    position:relative; 
    padding-bottom:2em; 
} 
ul.subMenu { 
    height:2em; 
    position:absolute; 
    width:100%; 
    bottom:0; 
} 
div.subMenuActions { 
    position:relative; 
} 
ul, div { /* normalize to zero */ 
    margin:0; 
    padding:0; 
} 
/* and the selectors */ 
ul.subMenu:empty + .subMenuActions > i, 
ul.subMenu:empty + .subMenuActions + .subMenuActions > i { 
    display: none; 
} 

http://jsfiddle.net/7VmR9/15/

В целом, гораздо проще здесь перейти на использование javascript.

Answer 2

В CSS нет, к сожалению (по крайней мере пока) селектора «предыдущего сиблинга».

я мог предложить только изменение порядка .subMenu и .subMenuActions, а затем использовать это:

.subMenu:empty + .subMenuActions > i{ 
    display: none; 
} 

Afterall, вы можете всегда стиль .subMenuActions, чтобы отобразить его в нужном месте.