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.

http://jsfiddle.net/95vrb/2/

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

Popular posts from this blog

c# - How to get the current UAC mode -

postgresql - Lazarus + Postgres: incomplete startup packet -

javascript - Ajax jqXHR.status==0 fix error -