title: Alternate table row colors for direct child
body: <p>I want to color the rows of my table with differents colors so I'm using this</p>
  
  <pre><code>table#news tr:nth-child(even) {      
    background-color: red;
  }
  table#news tr:nth-child(odd) {
    background-color: green;
  }
  </code></pre>
  
  <p>It works well with this kind of structure</p>
  
  <pre><code>&lt;table id="news"&gt;
  &lt;tr&gt;&lt;td&gt;Row 1&lt;/td&gt;&lt;/tr&gt;
  &lt;tr&gt;&lt;td&gt;Row 2&lt;/td&gt;&lt;/tr&gt;
  &lt;tr&gt;&lt;td&gt;Row 3&lt;/td&gt;&lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>But now I work with this kind of table. </p>
  
  <pre><code>&lt;table id="news"&gt;
    &lt;tr&gt;
      &lt;td&gt;
        &lt;tr&gt;&lt;td&gt;1&lt;/td&gt;&lt;/tr&gt;
        &lt;tr&gt;&lt;td&gt;2&lt;/td&gt;&lt;/tr&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>The style is also applied for the rows inside the rows. </p>
  
  <p>How can I proceed to apply the alternate color only for the first level of <code>&lt;tr&gt;</code> ?</p>