title: Apply CSS to even and odd elements following a peer element (table with sub-headers)
body: <p>I'm trying to color the even and odd elements of the table rows following the table row with class "ratingHead". When ".ratingHead" is reached the colors should restart. </p>
  
  <p><a href="http://tinypic.com/r/ng28sp/8" rel="nofollow">This image of the table may be more clear</a></p>
  
  <p>Here is the structure of the code</p>
  
  <pre><code>&lt;table class="evalTable"&gt;
      &lt;thead&gt;
         &lt;tr&gt;&lt;th&gt;&lt;/th&gt;&lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
         &lt;tr class="tableHeadings"&gt;&lt;/tr&gt;
         &lt;tr class="ratingHead"&gt;&lt;/tr&gt;
         &lt;tr class="tableItems&gt;&lt;/tr&gt;
         &lt;tr class="tableItems&gt;&lt;/tr&gt;
         &lt;tr class="tableItems&gt;&lt;/tr&gt;
         &lt;tr class="tableItems&gt;&lt;/tr&gt;
         &lt;tr class="tableHeadings"&gt;&lt;/tr&gt; &lt;-- Keeps repeating based on how much information
         &lt;tr class="ratingHead"&gt;&lt;/tr&gt;    is dynamically generated from the database
         &lt;tr class="tableItems&gt;&lt;/tr&gt;   &lt;-------------------------------------------------------&gt;
      &lt;/body&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>This is the css I have at the moment</p>
  
  <pre><code>tr.tableItems:nth-child(odd) {
  background-color: rgb(233, 231, 239);
  } 
  
  tr.tableItems:nth-child(even) {
  background-color: #f9f9f9;
  }
  </code></pre>