CSS select div with no elements

Question

I need to make a DIV that has text but no child elements invisible with CSS is there a way to do that?

if this is the html make the node visible

<div class="pages_available_text" style="">
                        1
    <a href="javascript: void(0);" onclick="Add_Search_Param('page', 2); return Refine();">2</a>

    <a href="javascript: void(0);" onclick="Add_Search_Param('page', 3); return Refine();">3</a>

</div>

but if this is the HTML

<div class="pages_available_text">
                        1
</div>

it should hide the div (:empty wont work because the div contains text)

Answer 1

A workaround (but doesn't remove div used space, just make the text invisible), wrap the text with a span (since TextNode cannot be selected using css), then hide it using :only-child selector:

<style>
  .pages_available_text > :only-child {
    display:none;
  }
</style>

<div class="pages_available_text">
  <span class='num'>1</span>
  <a href="javascript: void(0);" onclick="Add_Search_Param('page', 2); return Refine();">2</a>
  <a href="javascript: void(0);" onclick="Add_Search_Param('page', 3); return Refine();">3</a>
</div>

<div class="pages_available_text">
  <span class='num'>1</span>
</div><!-- the span won't show -->

Answer 2

I think a JS snippet is your best bet something like:

if (!$('.pages_available_text').child().length) {$('.pages_available_text').hide();}