title: Select element without a child
body: <p>I have a page that might one of the following:</p>
  
  <pre><code>&lt;span id='size'&gt;33&lt;/span&gt;
  </code></pre>
  
  <p>Or</p>
  
  <pre><code>&lt;span id='size'&gt;
      &lt;b&gt;33&lt;/b&gt;
      &lt;strike&gt;32&lt;/strike&gt;
  &lt;/span&gt;
  </code></pre>
  
  <p>I would like to grab the value '33' on both cases, is there a CSS selector I can use?
  I tried to use the following, #size with no b sibling or b which is a #size sibling:</p>
  
  <pre><code>document.querySelector('#size:not(&gt;b), #size&gt;b').innerText
  </code></pre>
  
  <p>But I keep getting an error- "Error: SYNTAX_ERR: DOM Exception 12"</p>
  
  <p>According to <a href="http://www.w3.org/TR/css3-selectors/#negation">w3 Spec</a> only <a href="http://www.w3.org/TR/css3-selectors/#simple-selectors-dfn">Simple Selectors</a> are supported, the thing is that "greater-than sign" (U+003E, >)" is considered as part of the <a href="http://www.w3.org/TR/css3-selectors/#simple-selectors-dfn">Simple Selectors</a> definition. </p>