title: CSS immediate child selector
body: <pre><code>#main .container &gt; div:not(.sites):not(.default) {
       display: none;
  }
  </code></pre>
  
  <p>The <code>&lt;h1&gt;</code> tag is visible while the below <code>yui-ge</code> div tag is hidden.  If > only applies to immediate children how come my <code>yui-ge</code> is having the above CSS applied to it (both in Chrome and Firefox).</p>
  
  <pre><code>&lt;div class='container'&gt;
      &lt;div class='default selected'&gt;
         &lt;h1&gt;Page Title&lt;/h1&gt;
         &lt;div class='yui-ge'&gt; //for some reason, this tag remains hidden cause of the above CSS
            //more div tags
         &lt;/div&gt;
      &lt;/div&gt;
      //more HTML here
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>update</strong></p>
  
  <p>Look here: --LINK REMOVED--</p>
  
  <p>Click the "Woot" tab.... no results are shown on the default woot tab - they remain hidden.</p>