:Empty Selector for Parent Element

:empty selector for parent element

The best I can offer (bearing in mind that there is no parent-selector for CSS), is to reorganise your HTML to the following:

<div class="listContainer">
    <ul class="list"></ul>
    <header>Title</header>
</div>
<div class="listContainer">
    <ul class="list">
        <li>Non-empty</li>
    </ul>
    <header>Title</header>
</div>

And use the following CSS:

.listContainer {
    position: relative;
    border: 2px solid #000;
}

.listContainer header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

.listContainer .list {
    margin-top: 2em;
}

.list:empty,
.list:empty + header {
    display: none;
    height: 0;
    margin: 0;
    overflow: hidden;
}

JS Fiddle demo.

This does, unfortunately, require some ugly hacking to position the header element, and doesn't precisely hide the .listContainer (since, again, this isn't possible based upon a child element), however it does approximate your requirement.

With the same HTML as above, but using the flex-box model (as currently, as of this time and date, implemented in Webkit) to reorder the elements' display, and thus avoid the position: absolute ugliness:

.listContainer {
    border: 1px solid #000;
    display: -webkit-flex;
    -webkit-flex-direction: column;
    -webkit-flex-wrap: nowrap;
}

.listContainer header {
    display: -webkit-flex-block;
    -webkit-order: 1;
    -webkit-flex: 1 1 auto;
}

.listContainer .list {
    display: -webkit-flex-block;
    -webkit-flex-direction: column;
    -webkit-order: 2;
    -webkit-flex: 1 1 auto;
}

.listContainer .list:empty,
.listContainer .list:empty + header {
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    display: none;
}

JS Fiddle demo.

CSS selector for parent with blank element

Yes! However- the pseudo class is :empty not :blank:

li>p:empty {  display: none;}

<li>  <p>Size</p>  <p></p> <!-- blank --></li>
<li>  <p>Color</p>  <p>Blue</p> <!-- NOT blank --></li>

CSS selector that matches parent of empty element

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.

How to style parent element if child element is empty?

You can't target a parent element with CSS. So it seems impossible to achieve this only with CSS.

Assuming you're using jQuery :

$('.list li:first-child').is(':empty').parent().css({"padding-top", "20px"});

Select parent of empty elements using Sass or CSS

There is not such selector to do this but you can simulate the effect using a pseudo element:

table {  overflow: hidden;  position: relative;  z-index: 0;}
tr>td:empty {  position: relative;}
tr>td:empty::before {  content: "";  position: absolute;  z-index: -1;  top: 0;  left: -50vw;  right: -50vw;  bottom: 0;  background-color: #f3f3f3;}

<table>  <thead></thead>  <tbody>    <tr>      <td>No</td>      <td>empty</td>      <td>cells</td>      <td>here</td>    </tr>    <tr>      <td>Does</td>      <td>have</td>      <td>empty</td>      <td>cell</td>      <td></td>    </tr>  </tbody>  <tfoot></tfoot></table><table>  <thead></thead>  <tbody>    <tr>      <td></td>      <td>empty</td>      <td>cells</td>      <td></td>      <td>here</td>    </tr>    <tr>      <td>Does</td>      <td>have</td>      <td></td>      <td>empty</td>      <td>cell</td>    </tr>  </tbody>  <tfoot></tfoot></table>

:Empty Selector for Parent Element