1

<style>
#b2-Column1 {
    background-color:red;
    min-height:120px;
}

#b2-Column1 > div {
    background-color:yellow;
    min-height:100px;
}

</style>

<div id="b2-Column1">
<div><!-- some comments here's --></div>
</div>

How can I do, if the yellow section is empty, then I want to both red and yellow setting to display:none;

Dick Leung
  • 21
  • 3
  • you can't move backward in CSS – Suresh Ponnukalai Jun 01 '21 at 04:29
  • If you set the min-height and :not(:emtpty) selector on the child, you may keep the parent to be 0 of height. You have to think otherwise ;) if updating the structure and js are no options. Answer stands already below. See what you can do from it. – G-Cyrillus Jun 01 '21 at 06:54

2 Answers2

1

The best you can do is to hide the yellow part with :empty pseudo-class, however, as we don't have a parent selector, you will have to look for JavaScript solution for the red part.

.container {
  background-color: red;
  min-height: 120px;
  margin-top: 1em;
}

.child {
  background-color: yellow;
  min-height: 100px;
}

.child:empty {
  display: none;
}
<div class="container">
  <div class="child"><!-- some comments here's --></div>
</div>


<div class="container">
  <div class="child">
    <p></p>
  </div>
</div>
lastr2d2
  • 3,604
  • 2
  • 22
  • 37
  • I can not change the structure, it generates from some builder. So the main point is how can display:none , when the yellow section is nothing content, both yellow and red section set disable. – Dick Leung Jun 01 '21 at 04:45
  • the DOM structure is the same as your example. the gist of the snippet is the `:empty` selector which could be easily reused in your case. still, as said in the answer, there is not too much you can do with the red part. – lastr2d2 Jun 01 '21 at 04:50
  • However, if your requirement is to make these `div`s `disabled`, there is a trick, make the yellow box `disabled`, enlarge it and make it cover the entire red box – lastr2d2 Jun 01 '21 at 04:52
-1

If you want to do from Jquery then apply this:-

if($("#b2-Column1 > div").text() != ''){
    console.log('Not Emtpy');
}
else{
    console.log('Empty');
    $("#b2-Column1 > div,#b2-Column1").hide();
}
H.S
  • 124
  • 1
  • 7