css - :empty selector for parent element -

i have div header element , ul in load li items:

<div class="listcontainer">     <header>title</header>     <ul class="list">         <li>test element</li>         <li>test element</li>         <li>test element</li>     </ul> </div> 

in case whole .listcontainer needs visible.

but possible hide whole container css :empty selector, if .list empty, this:

<div class="listcontainer">     <header>title</header>     <ul class="list">     </ul> </div> 

right i'm using :empty selector hide ul, whole .listcontainer needs hidden.

.list:empty { display: none; } 

i know possible javascript, in case need css alone, not sure if possible.

the best can offer (bearing in mind there no parent-selector css), reorganise html 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 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 ugly hacking position header element, , doesn't precisely hide .listcontainer (since, again, isn't possible based upon child element), approximate requirement.

with same html above, using flex-box model (as currently, of time , date, implemented in webkit) reorder elements' display, , avoid 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.