Select the nth following sibling

I wondered if there is a better solution than to what I found without changing the html-structure

The HTML structure looks like this

<div class="wrap">
  <div class="divider"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="divider"></div>
</div>

So there's various DIVs on the same level, what I want to do is to color every fourth block differently, until a divider appears, then it'd have to recount.

I thought something like .block:nth-child(4n) would do the trick, but it actually counts the elements based on the parent, not based on the class.

Here's the JSFiddle to try out. Block #4 and #8 in each row should be differently colored http://jsfiddle.net/SKgdH/3/

And this is how I made it sort-of work: http://jsfiddle.net/SKgdH/1/

What I did was to look for the 4th sibling of the .divider like this .divider + .block + .block + .block + .block

It works, however, I'd have to write the same for the 8th, 12th, 16th, .. block, which doesn't make it automatic anymore.

Is there something like .divider + .block:nth-sibling(4) or .divider + .block:nth-of-class(4)?

Maybe one of you got an idea on how to solve this without changing the source code or using javascript.