css - Alternate row colors between two divs -

i'm not sure if possible in css, if is, appreciate help.

i have html similar following:

<div class="group"></div>  <div class="group"></div> <div class="group subgroup"></div> <div class="row"></div> <div class="row"></div>  <div class="group"></div> <div class="group subgroup"></div> <div class="row"></div> 

is possible alternate background colors of row classes? starting same color? i've been having trouble achieving using nth-child , i'm assuming it's because of group/subgroup classes.

manual html markup in jsfiddle of example data set returned , how designed styled: http://jsfiddle.net/qr5za/

'always starting same color' means first row after group/subgroup starts red

if so, can set background-color of first .row red , others magenta by:

.group ~ .row { /* select rows comes after each group */     background-color: magenta; }  .group + .row { /* select , override first row after each group */     background-color: red; } 

jsbin demo

these selectors called general sibling combinator ~ , adjacent sibling combinator +, can find more details here.

update

all new css3 selectors :nth-child(n), :nth-of-type(n) matches every element nth child or type, of parent.

so way achieve this, putting .rows in wrapper each block:

<div class="group">this group</div> <div class="group subgroup">this subgroup</div> <div class="wrap">   <div class="row">this first row</div>   <div class="row">this second row</div>   <div class="row">this third row</div>   <div class="row">this forth row</div> </div> 

and selecting odd , even rows based on position in .wraper (their parent):

.row:nth-child(odd) {   background-color: red; }  .row:nth-child(even) {   background-color: magenta; } 

jsbin demo #2