How to hide parent HTML element only if child HTML element is empty, using only CSS?

Question

Consider the situation:

<section><h1>TITLE</h1>
...
<div class="section-body">

Lorem ipsum dolor sit amet consectetur, adipisicing elit.

</div>
</section>

<section><h1>TITLE-TO-HIDE</h1>
...
<div class="section-body">
</div>
</section>

---

My question is how do you hide the entire <section>...</section> with the empty child div.section-body ? using only CSS, if possible ? else can someone explain why it isn't possible and/or provide a way to achieve this behavior in whatever way it is possible ?

Answer 1

You can select a parent element with :has but it only supported by Safari and the lastest chrome versions (105+, CanIUse ).

You can select an empty element with the :empty pseudo class. Note that you need the div to be empty with no space, according to MDN or CanIUse :

The :empty pseudo-class was changed to act like :-moz-only-whitespace, but no browser currently supports this yet.

 .body-section{ width:100px; height:100px; border:1px solid black; margin-bottom:5px; } .body-section:empty{ display:none; }

 <div class="body-section">A</div> <div class="body-section"></div> <div class="body-section">C</div> <div class="body-section"> </div>

Answer 2

CSS can only traverse downward, a child can never apply a style to its parent/previous siblings.

So your best case scenarion is to place .section-body as first child and hide every sibling. It'll not hide section

 .section-body:empty ~ * { display: none; }

 <section> <div class="section-body"> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Itaque minima repudiandae sequi ex voluptatem illo, hic tempora recusandae commodi, similique earum laudantium deleniti atque placeat nemo, aperiam ullam dicta quae. </div> <h1>This will not be hidden</h1> </section> <section> <p>Down side siblings can't be selected</p> <div class="section-body"></div> <h1>This will be hidden</h1> </section> <section> <div class="section-body"> </div> <p>Having new line is not empty</p> </section> <section> <div class="section-body"></div> <h1>This will be hidden.</h1> </section>

Let examin our " little hack ", .section-body:empty ~ * will select every :empty tag that have a class section-body , we can get next sibligs with ~ and using * will select all of them.

Cons :

• You need to change structure
• If you have new lines, spaces or anything , this will not be empty

So a betther solution is to use javascript

And here is simple vanilla javascript solution

 document.querySelectorAll("section > .section-body").forEach(function (el) { if (el.textContent.trim() === '') { el.parentNode.style.display = "none"; } });

 <section> <h1>TITLE</h1> <div class="section-body"> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Itaque minima repudiandae sequi ex voluptatem illo, hic tempora recusandae commodi, similique earum laudantium deleniti atque placeat nemo, aperiam ullam dicta quae. </div> </section> <section> <h1>TITLE 2</h1> <div class="section-body"> </div> </section>

Answer 3

I would say that pure CSS is probably not the best way to do what you aim for. This type of condition is easily handled with proper code, while stylesheet methods are very confused from a browser to another.

I can propose you a very simple Javascript solution, on the snippet below I removed the section but you can just hide it aswell using .style.display="none" instead of removeChild .

 function checkEmpty(){ const sectionBody = document.getElementsByClassName("sectionBody"); Array.from(sectionBody).forEach((el) => { //loop on every div of the class if (el.textContent.trim() === '') //check if the div is empty { var section = el.parentElement; section.parentNode.removeChild(section); //remove parent section of the current div } }); }

 <section><h1>TITLE</h1> ... <div class="sectionBody"> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Itaque minima repudiandae sequi ex voluptatem illo, hic tempora recusandae commodi, similique earum laudantium deleniti atque placeat nemo, aperiam ullam dicta quae. </div> </section> <section><h1>TITLE-TO-HIDE</h1> ... <div class="sectionBody"> </div> </section> <br> <input type="button" onclick="checkEmpty()" value ="Remove empty section(s)">