title: CSS background-color not applied to all cells with class
body: <p>I've got a table that has a background colour applied every other row for easy view using the <code>:nth-child</code> pseudo-class, but uses an additional class to highlight certain information by applying a different background colour to that cell.</p>
  
  <p>The confusing part is that for even rows (where the original style is <code>background-color: none;</code>) the highlight colour is applied, but odd rows (where the style is <code>background-color: #C4A66F;</code>) don't apply the new highlighted style.</p>
  
  <p><strong>Image</strong></p>
  
  <p><img src="https://i.stack.imgur.com/AK2yI.jpg" alt="Image of problem"></p>
  
  <p>As you can see, the highlighting is sporadic. It should be applied to the 'Inns' column cells when the value is equal to or more than 15. The class (<code>tqual</code>) appears in the html as expected.</p>
  
  <p><strong>HTML</strong></p>
  
  <p>The html below is within a loop over each row, so the <code>tqual</code> class is added correctly to cells with where the value is >= 15.</p>
  
  <pre><code>&lt;tr class="tdata"&gt;
       &lt;td class="col-name"&gt;&lt;?php echo $name; ?&gt;&lt;/td&gt;
       &lt;td class="col-apps"&gt;&lt;?php echo $apps; ?&gt;&lt;/td&gt;
       &lt;td class="&lt;?php if($inns&gt;=15) echo "tqual ";?&gt;col-inns"&gt;&lt;?php echo $inns; ?&gt;&lt;/td&gt;
       [...]
  &lt;/tr&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>tr.tdata:nth-child(even) td {
      background-color: none;
  }
  
  tr.tdata:nth-child(odd) td {
      background-color: #C4A66F;
  }
  
  td.tqual {
      background-color: #DDDD00;
  }
  </code></pre>
  
  <p>Any ideas? Thanks.</p>