7

I have two div a child and a parent. the child contains a contact number. If there is no contact number I want the parent div to display none. I am trying to use the :empty CSS statement but I think I am using the wrong logic.

#inter #inter-content:empty {
    display:none;
}

<div id="inter" class="telephone">Intl: <div id="inter-content">{{contact_number_international}}</div></div>

I'm not sure if CSS is the right route either. I have tried using the bottom as well:

#inter + #inter-content:empty {
    display:none;
}
TylerH
  • 20,799
  • 66
  • 75
  • 101
Philip
  • 395
  • 1
  • 5
  • 15

4 Answers4

8

You cant do this in the way you are approaching it due to how CSS works, and that you can only write selectors to isolate child/subsequent DOM nodes. :empty also works on selecting elements with no child nodes (elements or text).

The :empty pseudo-class represents any element that has no children at all. Only element nodes and text (including whitespace) are considered.

As such, you cannot select a parent element using CSS- and you cannot determine a node to be empty, if it contains another node (whether that node is empty or not).

One way to potentially get around this, is to apply the label in your code as a pseudo element, with its content conditionally sourced from a (data) attribute if the element is not empty. This will give the impression of the parent not displaying content if no number is present.

That said, if you actually dont want to display the parent at all- you will run into trouble using CSS alone. It looks like you are using angular (or similar), in which case you may want to use a logical check to toggle the parent's visibility.

.inter div:not(:empty):before {
  display: block;
  content: attr(data-label);
}
<div class="inter" class="telephone">
  <div data-label="Intl: ">21342213</div>
</div>

<div class="inter" class="telephone">
  <div data-label="Intl: "></div>
</div>
SW4
  • 69,876
  • 20
  • 132
  • 137
  • 1
    This is absolutely brilliant! thank you so much for this. But for some reason it hides all the data-labels on my page. – Philip Jan 14 '15 at 08:30
  • 1
    I will mark this as the answer because it did answer my question correctly. I just asked my question incorrectly. Thank you so much this really is brilliant. you actually tought me alot today – Philip Jan 14 '15 at 08:35
1

If you are using for example angular you could write

<div id="inter" class="telephone" ng-if="contact_number_international != null">
    <div id="inter-content">Intl: {{contact_number_international}}</div>
</div>

Other frameworks should have such functions too. (I assume u use something because of "{{}}")

Skotnik
  • 677
  • 1
  • 6
  • 12
0

Fast forward a few years and CSS has a solution for this:

.outer-content:has(.inner-content:empty) { display: none; }

I was searching myself and none of the relevant answers were recently updated so I thought I'd write it down here.

The browser support :has to be considered of course

alou
  • 1,432
  • 13
  • 16
0

"Hide an empty container" questions are redirected here. So here's the simplest solution:

.hide-if-empty:empty { display: none !important;  }

<div class="hide-if-empty">
  <!-- if empty then hidden -->
</div>
lonix
  • 14,255
  • 23
  • 85
  • 176