title: CSS selector for element without child elements
body: <p>I'm trying to style a div element without child element such as below:</p>
  
  <pre><code>&lt;div class="ps_box-group eopcColumnGroup"&gt;
      &lt;span&gt;hello&lt;/span&gt;
  &lt;/div&gt;
  &lt;div class="ps_box-group eopcColumnGroup"&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>As you can see, there are multiple <code>&lt;div&gt;</code> elements with eopcColumnGroup class, the 1st div has a child span element, the 2nd div has no child element, but its text is not empty, the content is a bunch of [space] characters:</p>
  
  <pre><code>&lt;div class="ps_box-group eopcColumnGroup"&gt;
  [space][space][space][space]   
  &lt;/div&gt;
  </code></pre>
  
  <p>I'm using [space] to denote space characters.</p>
  
  <p>What I need is I only want to write special styles for the 2nd div which has no child element, I tried pseudo-class empty like this:</p>
  
  <pre><code>div.eopcColumnGroup:empty {
      padding-top:50px;
  }
  </code></pre>
  
  <p>But it does not work, because those space characters are not considered empty.</p>
  
  <p>I'm confined to use standard CSS to do this, so how do I write the selector to only select the 2nd div?</p>
  
  <p>Thanks for any tips, suggestions.</p>