CSS - Hide element if child is empty [duplicate]

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 Cascading Style Sheet — Joe Lissner
– Joe Lissner, Commented Mar 30, 2017 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
– Fabrizio Calderan, Commented Mar 30, 2017 at 15:29

Jules · Accepted Answer · 2023-12-20 04:10:41Z

27

You can use the :has() pseudo-class:

.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 Dec 20, 2023 at 4:10

Jules

2,8292 gold badges21 silver badges19 bronze badges

answered Jan 27, 2020 at 15:42

FuturrCoder

4576 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

tano Over a year ago

It works for me in Chrome, but not in Firefox. It seems empty does not work within has. Could you check it? Thanks!

FuturrCoder Over a year ago

@tano unfortunately, the :has selector is not supported in Firefox (yet!)

Jules Over a year ago

The :has selector is now supported in Firefox 121 – Source.

Rounin · Accepted Answer · 2020-01-27 19:59:34Z

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>

Collectives™ on Stack Overflow

CSS - Hide element if child is empty [duplicate]

2 Answers 2

3 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Linked

Related