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.

Your question is not clear enough. Are you asking how to hide all the elements inside the div with class 'foo'? If that is what you mean why don't you use: div.foo:empty { display: none } and hide the whole thing if empty? — Ionut Necula, Commented Oct 26, 2015 at 9:16
Have you tried .foo span:empty:first-child ? Also, in your code the span it's always the only child. The 'Some text' text is not a child. — Ionut Necula, Commented Oct 26, 2015 at 9:21
I think this cannot be done with only CSS. You should use jQuery or JavaScript. — Ionut Necula, Commented Oct 26, 2015 at 9:25
A pure CSS solution would need an extra element around Some text and existing span coming after this extra element (then reordered with flexbox or float or whatever). Then you could select the latter whether or not it comes after the extra element e.g. it's the :first-child or not — FelipeAls, Commented Oct 26, 2015 at 10:34

BoltClock · Accepted Answer · 2015-10-26 10:23:10Z

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();
}

BoltClock

716k164 gold badges1.4k silver badges1.4k bronze badges

answered Oct 26, 2015 at 9:39

Ionut Necula

11.4k4 gold badges47 silver badges72 bronze badges

Add a comment |

1 Answer 1