Sunday, 8 September 2013

Way to alternate table row colours with inconsistent classes with css

Way to alternate table row colours with inconsistent classes with css

I was wondering whether css is sophisticated enough to alternate table row
colours with a class in a table structure that includes other classes.
Take for example:
<table>
<tr class="alt">
<td></td>
</tr>
<tr class="alt">
<td></td>
</tr>
<tr class="differentClass">
<td></td>
</tr>
<tr class="alt">
<td></td>
</tr>
<tr class="differentClass">
<td></td>
</tr>
</table>
So what I would like to do is alternate the rows with the class "alt" only.
I have tried
table tr.alt:nth-child(even)
View this fiddle and you'll see what I mean: http://jsfiddle.net/6mTSP/.
The "And again" row should be white not grey.
Perhaps its not possible with a CSS only solution?

No comments:

Post a Comment