与空元素的父项匹配的CSS选择器

Question

I have such HTML code

<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 want to make selector for elements i in div.subMenuActions which will check if ul.subMenu is empty.

I know that I can check if ul.subMenu is empty by using CSS selector ul.subMenu:empty , but I need to hide i.icon-caret-down , i.icon-caret-right if ul.subMenu is empty.

Please no JS answers.

Answer 1

There is no way to select previous element sibling nor parent element with CSS on levels 1-3. As Mishik say, you can only select next siblings.

In your case if you reorder elements in HTML and you know the height of the ul.submenu element, you can use this solution:

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

then apply this 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/

All in all, much easier way here to go is to use javascript.

Answer 2

There is no "previous sibling" selector in CSS, unfortunately (at least for now).

I could only suggest changing the order of .subMenu and .subMenuActions and then use this:

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

Afterall, you can always style .subMenuActions to display it in the required place.