CSS - Hide element if child is empty

Question

Is it possible to hide a parent element, if its child is empty? I know there is the :empty selector, but it only works, if the parent doesn't contain anything, including HTML elements.

This is my HTML:

<div class="row">
    <div class="center">
        <span class="text-danger label-promotion"><strong></strong></span>
    </div>
</div>

And my CSS, which sadly doesn't work this way, but I think you get what I'm trying to do:

.label-promotion:empty {
    display: none;
}

I want the  not to appear if is empty and I'd like to avoid JS for this. Is that possible?

It isn't empty because there is a `` in there. Does it have to be there? (edit) Sorry, misread the top of the question. No, you cannot affect the parent based on what the child is doing. That is that **cascading** part of ***C*ascading *S*tyle *S*heet** — Joe Lissner, Mar 30 '17 at 15:27
You could remove the strong element and assign a font-weight: bold to the span element. Doing so you could hide the whole span with span:empty { display: none; } — Fabrizio Calderan, Mar 30 '17 at 15:29

score 16 · Answer 1 · edited Jan 14 '23 at 17:19

16

You can use has() (not yet supported in Firefox):

.label-promotion:has(> strong:empty) {
    display: none;
}

If the child of .label-promotion will always be a , you can do:

.label-promotion strong:empty {
    display: none;
}

to hide the . However, you can not hide the  itself with CSS. See this answer to a similar question: I would like to hide my outer div if inner div is empty

edited Jan 14 '23 at 17:19

Stan James

2,535
1
28
35

answered Jan 27 '20 at 15:42

FuturrCoder

307
3
7

1

It works for me in Chrome, but not in Firefox. It seems empty does not work within has. Could you check it? Thanks! – tano Dec 19 '22 at 10:26
@tano unfortunately, the :has selector is not supported in Firefox (yet!) – FuturrCoder Dec 20 '22 at 14:41

Rounin · Answer 2 · 2020-01-27T19:59:34.577

I'd like to avoid JS for this

Yes, I agree, it's always better to have a pure CSS solution.

But in this instance all you need to do is:

find all the .label-promotion <spans>
loop through them, checking if each has an empty 
if it does, add to the  the class .is-empty

Working Example:

// Find all the .label-promotion <spans>
const labelPromotions = document.querySelectorAll('.label-promotion');

// Loop through them... 
for (labelPromotion of labelPromotions) {

  let strong = labelPromotion.getElementsByTagName('strong')[0];
  
  // ... checking if each has an empty <strong> 
  if (strong.textContent === '') {
    
    // If it does, add to to the <span> the class .is-empty
    labelPromotion.classList.add('is-empty');
  }
}

span {
  display: inline-block;
  width: 32px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  border: 1px solid rgb(255, 0, 0);
  vertical-align: middle;
}

.is-empty {
  display: none;
}

<span class="text-danger label-promotion"><strong>A</strong></span>
<span class="text-danger label-promotion"><strong></strong></span>
<span class="text-danger label-promotion"><strong>C</strong></span>
<span class="text-danger label-promotion"><strong>D</strong></span>
<span class="text-danger label-promotion"><strong></strong></span>
<span class="text-danger label-promotion"><strong></strong></span>
<span class="text-danger label-promotion"><strong>G</strong></span>

CSS - Hide element if child is empty

2 Answers2

Linked