Is it possible to achieve what I want using CSS3 without Javascript? I've experimented with nth-child and nth-of-type, but couldn't get it to work. I have three table rows that I want to give a background color to, but the table rows beneath them should not have a different color. Is there a way to combine nth-of-type with even or odd?
Adding classes to the rows is not the solution I'm looking for. I want to solve it with CSS3, even if IE doesn't support it. Is there a way to make this work?
For the HTML:
<table class="dummyclass">
<tbody>
<tr class="This_should_get_a_background_color">
<th>Dummytext</th>
<td><a href="#">Dummy dummy</a></td>
</tr>
<tr class="This_should_get_a_background_color">
<th>Dumminho</th>
<td>Golazo</td>
</tr>
<tr class="This_should_get_a_background_color">
<th>Great game</th>
<td>yesterday</td>
</tr>
<tr class="no-background-please">
<th>Dummytext</th>
<td><a href="#">Dummy dummy</a></td>
</tr>
<tr class="no-background-please">
<th>Dumminho</th>
<td>Golazo</td>
</tr>
<tr class="no-background-please">
<th>Great game</th>
<td>yesterday</td>
</tr>
<tr class="This_should_get_a_background_color">
<th>Dummytext</th>
<td><a href="#">Dummy dummy</a></td>
</tr>
<tr class="This_should_get_a_background_color">
<th>Dumminho</th>
<td>Golazo</td>
</tr>
<tr class="This_should_get_a_background_color">
<th>Great game</th>
<td>yesterday</td>
</tr>
</tbody>
</table>
I've tried various CSS solutions like tr:nth-of-type(2n+1), but it seems that won't work for me. You can check it out on this link.
For a code demo, visit this JSFiddle link.
The rows have descriptive classnames to help you understand my goal.