title: CSS empty selector insane logic
body: <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
      &lt;style&gt;
          tbody:empty::after { content: 'empty'; }
      &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;table&gt;
          &lt;tbody&gt;text &lt;/tbody&gt; &lt;!-- output: "text " (newline) "empty" --&gt;
  &lt;!--    &lt;tbody&gt;text&lt;/tbody&gt;  &lt;!-- output: "text"  (newline) "empty" --&gt;
  &lt;!--    &lt;tbody&gt;&lt;/tbody&gt;      &lt;!-- output: "empty" --&gt;
  &lt;!--    &lt;tbody&gt; &lt;/tbody&gt;     &lt;!-- output: "" --&gt;
  &lt;!--    &lt;tbody&gt;&lt;p&gt;&lt;/tbody&gt;   &lt;!-- output: "empty" --&gt;
  &lt;!--    &lt;tbody&gt;&lt;tr&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt; &lt;!-- output: "" --&gt;
      &lt;/table&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>This is not intuitive at all.  </p>
  
  <p>"text " tests as empty<br>
  "text"  tests as empty<br>
  ""      tests as empty<br>
  " "     tests as NOT empty<br>
  "&lt; tr>&lt; td>&lt; /td>&lt; /tr>"     tests as NOT empty<br>
  "&lt; p>"   tests as empty  </p>
  
  <p>So basically anything other than all whitespace (or table tags) tests as empty.
  How backwards is that?
  I would expect "" and " " to test as empty.  Or anything other than valid tags for tbody to test as empty.
  But for text to test as empty while whitespace tests as NOT empty, is insane.
  Applies to at least IE11 and Chrome.  Probably others browsers too.</p>
  
  <p>Here's the question.  How can a test be done for all whitespace tbody and inject content in such case?</p>