title: Select the nth following sibling
body: <p>I wondered if there is a better solution than to what I found without changing the html-structure</p>
  
  <p>The HTML structure looks like this</p>
  
  <pre><code>&lt;div class="wrap"&gt;
    &lt;div class="divider"&gt;&lt;/div&gt;
    &lt;div class="block"&gt;&lt;/div&gt;
    &lt;div class="block"&gt;&lt;/div&gt;
    &lt;div class="divider"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>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.</p>
  
  <p>I thought something like <code>.block:nth-child(4n)</code> would do the trick, but it actually counts the elements based on the parent, not based on the class.</p>
  
  <p>Here's the JSFiddle to try out.
  Block #4 and #8 in each row should be differently colored
  <a href="http://jsfiddle.net/SKgdH/3/" rel="noreferrer">http://jsfiddle.net/SKgdH/3/</a></p>
  
  <p>And this is how I made it sort-of work:
  <a href="http://jsfiddle.net/SKgdH/1/" rel="noreferrer">http://jsfiddle.net/SKgdH/1/</a></p>
  
  <p>What I did was to look for the 4th sibling of the .divider like this <code>.divider + .block + .block + .block + .block</code></p>
  
  <p>It works, however, I'd have to write the same for the 8th, 12th, 16th, .. block, which doesn't make it automatic anymore.</p>
  
  <p>Is there something like <code>.divider + .block:nth-sibling(4)</code> or <code>.divider + .block:nth-of-class(4)</code>?</p>
  
  <p>Maybe one of you got an idea on how to solve this without changing the source code or using javascript.</p>