Possibility to trigger only child for 2 div's where one div is hidden-CodePudding

Is it possible to have the only-child css property trigger. When there are two children for a div but one of them is hidden using css?

So I tried

<div class"hide-if-one-child">
   <div>Hi, am I the only one?</div>
   <div ></div>
</div>

With css

.hide:empty {
  display:none;
}

.hide-if-one-child:only-child {
  display:none;
}

So I supposed that because the second div was hidden, it might hide the top most div, as there is only one child "displayed". I suppose, that it the display:none does not do this though. Is there a way to do this using only css?

CodePudding user response：

As @niorad pointed out you could use has pseudo-class but be aware that the current browser support is not that great

.hide-if-one-child:has(div:empty) {
  border: solid 2px black; 
  /*display: none*/
}

<div >
  <div>Hi, am I the only one?</div>
  <div ></div>
</div>

<div >
  <div>Hi, am I the only one?</div>
  <div >No you're not</div>
</div>