title: Selector for when only one child exists in parent
body: <p>I'm playing around with CSS selectors and i'm wondering can i build a custom css selector to only work when there only one of class <code>.widget-button</code>, example code;</p>
  
  <pre><code>&lt;div class='container a'&gt;
    &lt;div class='widget-a' /&gt;
    &lt;div class='widget-b' /&gt;
    &lt;div class='widget-button' /&gt; 
    &lt;div class='widget-b' /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>So you would assume theres' a combination of pseudo selectors (<code>:only-child ?</code>) to this job  that will work for the above? Hoever the bellow example should no selections/styles applyied as there more then one that class. </p>
  
  <pre><code>&lt;div class='container b'&gt;
    &lt;div class='widget-a' /&gt;
    &lt;div class='widget-b' /&gt;
    &lt;div class='widget-button' /&gt;
    &lt;div class='widget-z' /&gt;
    &lt;div class='widget-x' /&gt;
    &lt;div class='widget-button' /&gt;
    &lt;div class='widget-z' /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here a JSFiddle
  <a href="https://jsfiddle.net/2L593m3x/" rel="noreferrer">https://jsfiddle.net/2L593m3x/</a></p>