How to add styles based on whether top element is empty

Question

How do you change styles of another element based on whether the first element is empty.

<ul></ul>
<ul>
<li>....</li>
<li>....</li>
<li>....</li>
</ul>

In the above code, I want to give a style for the second ul { color:red } (to be more exact the ul that follows) ONLY if the first ul is empty.

Is there a pure CSS solution for this?

Answer 1

You can do this, but only if the element in question is completely empty- yes, not even a whitespace.

http://jsfiddle.net/NicoO/uTJ4N/

ul:empty + ul
{
    color: red;
}

To be more accurate, this is the selector you need for the first empty <ul> of the body and the exact following <ul>:

body > ul:first-of-type:empty + ul
{
    color: red;
}

http://jsfiddle.net/NicoO/uTJ4N/1/

Answer 2

Try this code:

ul > li {
   color: red;
}

Its selects the ul which has a li as child element. And those can be colored red then.

Answer 3

http://jsfiddle.net/keypaul/KfaQv/1/

ul:not(:empty) {
    color:red;
}

Answer 4

I dont think a pure css solution is the way to go, but you can use a pre-processor as they allow you to pass conditional statements.