Considere la situación:
<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-TO-HIDE</h1> ... <div class="section-body"> </div> </section> Mi pregunta es ¿cómo se oculta todo el <section>...</section> con el div.section-body del niño vacío? usando solo CSS, si es posible? ¿Alguien más puede explicar por qué no es posible y / o proporcionar una forma de lograr este comportamiento de cualquier manera posible?
CSS solo puede atravesar hacia abajo, un hijo nunca puede aplicar un estilo a su padre/hermanos anteriores.
Entonces, su mejor escenario es colocar .section-body como primer hijo y ocultar a todos los hermanos. No ocultará la 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> Examinemos nuestro " pequeño truco ", .section-body:empty ~ * seleccionará todas las etiquetas :empty que tengan un section-body clase, podemos obtener los siguientes hermanos con ~ y usar * los seleccionará a todos.
Contras :
Entonces, una mejor solución es usar javascript
Y aquí hay una solución simple de javascript de vainilla
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>Puede seleccionar un elemento principal con :has pero solo es compatible con Safari y las últimas versiones de Chrome (105+, CanIUse ).
Puede seleccionar un elemento vacío con la pseudo clase :empty . Tenga en cuenta que necesita que el div esté vacío sin espacio, según MDN o CanIUse :
La pseudoclase :empty se cambió para que actúe como :-moz-only-whitespace, pero actualmente ningún navegador lo admite todavía.
.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>Diría que CSS puro probablemente no sea la mejor manera de hacer lo que buscas. Este tipo de condición se maneja fácilmente con el código adecuado, mientras que los métodos de hoja de estilo se confunden mucho de un navegador a otro.
Puedo proponerle una solución Javascript muy simple, en el fragmento a continuación eliminé la sección, pero también puede ocultarla usando .style.display="none" en lugar de 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)">