Using CSS to hide <span> elements when they are empty

Question

I have this code:

<p class="alert-error">
<span></span>
<span></span>
<span></span>
</p>

I want to change the style of the CSS for "alert-error" when it shows <span></span>. The code is being generated by a system with limited backend customization. Sometimes the spans are filled with error messages.

The :empty selector doesn't seem to work cause I have to put it on the alert-error class.

Any help would be appreciated.

Answer 1

I made the css like this:

.alert-error span:empty {
    background: green;
}

and it works, see jsfiddle