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 <span> not to appear if is empty and I'd like to avoid JS for this. Is that possible?

Answer 1

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

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

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