Only child in CSS with a text sibling

Question

I want to make the following inner span disappear, if it's an only child:

<div class="foo">
  <span></span>  
</div>

i.e. the selector should not work in this case:

<div class="foo">
  <span></span>  
  Some text
</div>

I tried :only-child and :last-child which don't work, I assume because of that "Some text" text.

Answer 1

I think this cannot be done with only CSS. You should use jQuery or JavaScript by making some conditions.

if ($(".foo").text().length < 1 && $('.foo span').is(':empty')) {
    //hide your element here
    $('.foo').hide();
}