title: Select top level children using CSS
body: <p>Is it possible to select all top level children regardless of their type using CSS.</p>
  
  <blockquote>
  <pre><code>&lt;div class="parent"&gt; &lt;div class="top-level-1"&gt;
   &lt;!-- CONTENT --&gt;
  &lt;/div&gt;
  &lt;div class="top-level-2"&gt;
   &lt;!-- CONTENT --&gt;
  &lt;/div&gt;
  &lt;a class="top-level-3"&gt;
   &lt;!-- CONTENT --&gt;
  &lt;/a&gt; &lt;/div&gt;
  </code></pre>
  </blockquote>
  
  <p>When I use,</p>
  
  <pre><code>.parent * {}
  </code></pre>
  
  <p>it selects the child elements but also elements within that child.</p>
  
  <p>What I want to do is,</p>
  
  <ol>
  <li><p>Select <strong>ONLY</strong> the top level child elements (in the sample code above - div.top-level-1, div.top-level-2 and a.top-level-3)</p></li>
  <li><p>Classes will not be the same therefore a solution where classes are not used is preferred.</p></li>
  </ol>
  
  <p><strong>Here is the JSFiddle for better understanding:</strong> <a href="http://jsfiddle.net/Q4BBd/" rel="noreferrer">http://jsfiddle.net/Q4BBd/</a></p>