Way to alternate table row colours with inconsistent classes with css

Question

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?

You're looking for something like `:nth-of-class()` which does not exist. There's more likely a better way to structure your markup. — Fabrício Matté, Sep 09 '13 at 00:07
There certainly is a better way, but alas this is what I have to work with :/ — user2535949, Sep 09 '13 at 00:08

score 1 · Accepted Answer · answered Sep 09 '13 at 02:26

1

This is not currently possible with a CSS-only solution. Until CSS allows combinations of pseudo-selectors or has another pseudo-selector created specifically as mentioned in the comments, this would require JavaScript.

answered Sep 09 '13 at 02:26

Jake Jordan

311
1
6

Way to alternate table row colours with inconsistent classes with css

1 Answers1