Alternate row colors between two divs

css

Solution

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

If so, you can set `background-color` of the first `.row` red and the others `magenta` by:

.group ~ .row { /* select all rows comes after each group */
    background-color: magenta;
}

.group + .row { /* select and override the first row after each group */
    background-color: red;
}

JSBin Demo

These selectors are called General sibling combinator `~` and Adjacent sibling combinator `+`, you can find more details here.

Update

All new CSS3 selectors like `:nth-child(n)`, `:nth-of-type(n)` matches every element that is the `n`th child or type, of its parent.

So the only way to achieve this, is putting `.row`s in a wrapper for each block:

<div class="group">This is a group</div>
<div class="group subgroup">This is a subgroup</div>
<div class="wrap">
  <div class="row">This is the first row</div>
  <div class="row">This is the second row</div>
  <div class="row">This is the third row</div>
  <div class="row">This is the forth row</div>
</div>

And selecting `odd` and `even` rows based on their position in the `.wrap`er (their parent):

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

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

JSBin Demo #2

Problem

Original source