title: css3 nth of type restricted to class
body: <p>Is there any way to limit css3's <code>nth-of-type</code> to a class? I've got a dynamic number of <code>section</code> elements with different classes designating their layout needs. I'd like to grab every 3rd <code>.module</code>, but it seems that <code>nth-of-type</code> looks up classes element type and then calculates the type. Instead I'd like to limit it to only <code>.module</code>s.</p>
  
  <p>Thanks!</p>
  
  <p>JSFiddle to demonstrate: <a href="http://jsfiddle.net/danielredwood/e2BAq/1/" rel="noreferrer">http://jsfiddle.net/danielredwood/e2BAq/1/</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;section class="featured video"&gt;
      &lt;h1&gt;VIDEO&lt;/h1&gt;
  &lt;/section&gt;
  &lt;section class="featured module"&gt;
      &lt;h1&gt;NOT A VIDEO&lt;/h1&gt;
  &lt;/section&gt;
  &lt;section class="featured module"&gt;
      &lt;h1&gt;NOT A VIDEO&lt;/h1&gt;
  &lt;/section&gt;
  &lt;section class="featured module"&gt;
      &lt;h1&gt;NOT A VIDEO (3)&lt;/h1&gt;
  &lt;/section&gt;
  &lt;section class="featured module"&gt;
      &lt;h1&gt;NOT A VIDEO&lt;/h1&gt;
  &lt;/section&gt;
  &lt;section class="featured module"&gt;
      &lt;h1&gt;NOT A VIDEO&lt;/h1&gt;
  &lt;/section&gt;
  &lt;section class="featured module"&gt;
      &lt;h1&gt;NOT A VIDEO (6)&lt;/h1&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>​CSS:</p>
  
  <pre><code>.featured {
    width:31%;
    margin:0 0 20px 0;
    padding:0 3.5% 2em 0;
    float:left;
    background:#ccc;
  }
    .featured.module:nth-of-type(3n+3) {
      padding-right:0;
      background:red;
    }
    .featured.video {
      width:auto;
      padding:0 0 2em 0;
      float:none;
    }​
  </code></pre>