title: CSS Select First Row With Class
body: <p>I have rows like this:</p>
  
  <pre><code>&lt;tr class="team_2"&gt;Team Member&lt;/tr&gt;
  &lt;tr class="team_2"&gt;Team Member&lt;/tr&gt;
  &lt;tr class="team_1"&gt;Team Member&lt;/tr&gt;
  &lt;tr class="team_2"&gt;Team Member&lt;/tr&gt;
  &lt;tr class="team_1"&gt;Team Member&lt;/tr&gt;
  </code></pre>
  
  <p>I want to highlight the <strong>first member of each team</strong> as team captain. I tried this:</p>
  
  <pre><code>table tbody tr.team_2:first-of-type, table tbody tr.team_1:first-of-type {
  background: red;
  }
  </code></pre>
  
  <p>This highlighted the first row, but not the third row (captain for team 1). Is this type of selector possible?</p>