title: Selecting children elements but NOT grandchildren
body: <p>I have the following, simplified, code:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div id="content"&gt;
      &lt;p&gt;text&lt;/p&gt;
  
      &lt;div id="container"&gt;
          &lt;div id="col1"&gt;
              &lt;p&gt;text&lt;/p&gt;
          &lt;/div&gt;
          &lt;div id="col2"&gt;
              &lt;p&gt;text&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;p&gt;text&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Whenever I set some values to the <code>#content p</code> element in the CSS file, the changes also apply to the <code>#col1 p</code> and <code>#col2 p</code>.</p>
  
  <p>What I would like to do is select only the children <code>p</code> elements of the <code>#content</code> div and not select the grandchildren <code>p</code> elements.</p>
  
  <p>I imagine that one way of doing it would be to add a class to the first children and then apply properties throught it.</p>
  
  <p>Is there any better way of doing it in either CSS2 or CSS3?</p>