title: Is there a CSS selector for the first direct child only?
body: <p>I have the following html</p>
  
  <pre><code>&lt;div class="section"&gt;
     &lt;div&gt;header&lt;/div&gt;
     &lt;div&gt;
            contents
            &lt;div&gt;sub contents 1&lt;/div&gt;              
            &lt;div&gt;sub contents 2&lt;/div&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And the following style:</p>
  
  <pre><code>DIV.section DIV:first-child 
  {
    ...
  }
  </code></pre>
  
  <p>For some reason that I don't understand the style is getting applied to the <em>"sub contents 1"</em> <code>&lt;div&gt;</code> as well as the <em>"header"</em> <code>&lt;div&gt;</code>.  </p>
  
  <p>I thought that the selector on the style would only apply to the first direct child of a div with a class called "section".  How can I change the selector to get what I want?</p>