html - Using CSS3 to give per three table rows a background color -
an odd question maybe, want use css3
this, not sure if it's possible. tried experiment nth-child
, nth-of-type
, not work. guess it's hard want without using javascript
.
anyhow, let me tell want...
i have 3 <tr>
elements in table
want give background color. beneath these table rows, have 3 more table rows. not different color. problem: how select them? even
or odd
, it's not possible... is there possibility combine nth-of-type or odd? or utopia?
i know can give these rows class , make work, not aiming for. love solve css3, if ie
won't support it. there way this?
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>
and css
, tried lot of things tr:nth-of-type(2n+1)
, saw here that not option me: http://css-tricks.com/examples/nth-child-tester/
for fiddle, check here: http://jsfiddle.net/95vrb/1/
i have given rows descriptive classnames, can understand trying do.
there better way of doing works. basicaslly add background every 6th child, starting 1st, 2nd , 3rd element.
tr:nth-child(6n + 3), tr:nth-child(6n + 2), tr:nth-child(6n + 1) { background: #f00; }
i find excellent introduction :nth-child
http://css-tricks.com/how-nth-child-works/
Comments
Post a Comment