Using CSS to hide 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.

If I'm reading this right, you need to style `.alert-error` when it contains only empty spans? That would require a parent selector which isn't available in CSS. — BoltClock, Aug 04 '14 at 14:45
What can you customize in your backend ? Is that an opensource backend ? — AMDG, Aug 04 '14 at 14:55
I agree, back-end customization would be a nice[r] solution. It may be easier than you think to have it give the `p` tag an extra class if it doesn't have error messages. Might be worth looking in to! — Pete, Aug 04 '14 at 14:57
It's a Library Catalog system (Aleph) that is very clunky and doesn't allow to much customization. I have been able to do a lot with CSS and some of the HTML. But the messages that appear are hard to customize. — closeyetfar, Aug 04 '14 at 14:58
To be right about your question. You want to hide the empty `` elements within the class `alert-error`? — Raphael Müller, Aug 04 '14 at 15:06

score 0 · Answer 1 · answered Aug 04 '14 at 14:50

0

I made the css like this:

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

and it works, see jsfiddle

answered Aug 04 '14 at 14:50

Raphael Müller

2,170
2
13
19

3

OP wants to style the parent paragraph if the spans are empty, not the spans themselves. Plus, `:empty` deals with elements that have no children, not the content of an element. – j08691 Aug 04 '14 at 14:52
And why does his title say **Using CSS to hide elements when they are empty** ? – Raphael Müller Aug 04 '14 at 14:55
No, I read the whole question. But the title is part of the question, which sometimes isn't exactly clear... – Raphael Müller Aug 04 '14 at 14:58
@j08691 btw: `:empty` selector matches every element that has no children (including text nodes). (from [w3schools](http://www.w3schools.com/cssref/sel_empty.asp)) – Raphael Müller Aug 04 '14 at 15:08
@RaphaelMüller I want the "alert-error" class to display:none. So the whole red area would not show. I don't believe it's possible. – closeyetfar Aug 04 '14 at 15:29
I was looking for :empty, so this did help me. OP could perhaps restyle the spans instead of the parent div. – Herbert Van-Vliet Apr 28 '21 at 21:55

score 0 · Accepted Answer · edited May 23 '17 at 11:57

I'm guessing based on what I can surmise from your markup structure that you want to hide the entire .alert-error element, not the span elements as stated in the question title. It doesn't really make sense to display .alert-error itself if its children are empty, since that would just result in an empty box.

The problem is that :empty itself does not match an element if it has child elements, even when all the children themselves are :empty.

If CSS had a parent/has selector, you would theoretically be able to select .alert-error based on the fact that all its children are :empty. But since there doesn't exist such a selector in CSS yet, you will need to use JavaScript.

Using CSS to hide elements when they are empty

2 Answers2