CSS selector that matches parent of empty element

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.

This is not HTML code, because `` element can't be self-closed in any way in HTML. It may be XML/XHTML code if served with appropriate `Content-type`, but if served as `text/html`, this code will be interpreted by HTML parsers as nested unclosed tags. — Ilya Streltsyn, Jul 13 '13 at 14:20

score 3 · Accepted Answer · edited May 23 '17 at 10:25

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.

mishik · Answer 2 · 2013-07-13T10:17:22.437

1

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.

edited Jul 13 '13 at 10:17

answered Jul 13 '13 at 10:09

mishik

9,973
9
45
67

Your statements are contradictory. There is indeed no "previous sibling selector" in CSS - this actually precludes `~` being able to find *all* siblings. So your code won't work. – BoltClock Jul 13 '13 at 10:11
@BoltClock I have hidden the post right away when I realized that `~` will not work this way. – mishik Jul 13 '13 at 10:19

CSS selector that matches parent of empty element

2 Answers2