title: how to use nth-of-type for classes -- not elements
body: <p>I am working on a simple HTML for an image gallery. Each row of the gallery can have 2, 3 or 4 images. (In an 2-image row, each image element is named <code>type-2</code>, the same goes to <code>type-3</code> and <code>type-4</code>.)</p>
  
  <p>Now I want to select the last element of each row to set a custom margin. My HTML is like this:</p>
  
  <pre><code>&lt;div id="content"&gt;
      &lt;div class="type-2"&gt;&lt;/div&gt;
      &lt;div class="type-2"&gt;&lt;/div&gt; &lt;!-- I want this, 2n+0 of type-2 --&gt;
      &lt;div class="type-3"&gt;&lt;/div&gt;
      &lt;div class="type-3"&gt;&lt;/div&gt;
      &lt;div class="type-3"&gt;&lt;/div&gt; &lt;!-- this, 3n+0 of type-3 --&gt;
      &lt;div class="type-4"&gt;&lt;/div&gt;
      &lt;div class="type-4"&gt;&lt;/div&gt;
      &lt;div class="type-4"&gt;&lt;/div&gt;
      &lt;div class="type-4"&gt;&lt;/div&gt; &lt;!-- this, 4n+0 of type-4 --&gt;
      &lt;div class="type-2"&gt;&lt;/div&gt;
      &lt;div class="type-2"&gt;&lt;/div&gt; &lt;!-- this --&gt;
      &lt;div class="type-3"&gt;&lt;/div&gt;
      &lt;div class="type-3"&gt;&lt;/div&gt;
      &lt;div class="type-3"&gt;&lt;/div&gt; &lt;!-- this --&gt;
      &lt;div class="type-4"&gt;&lt;/div&gt;
      &lt;div class="type-4"&gt;&lt;/div&gt;
      &lt;div class="type-4"&gt;&lt;/div&gt;
      &lt;div class="type-4"&gt;&lt;/div&gt; &lt;!-- this --&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I think the following CSS would work but it didn't:</p>
  
  <pre><code>.type-2:nth-of-type(2n+0) {margin-right:0;}
  .type-3:nth-of-type(3n+0) {margin-right:0;}
  .type-4:nth-of-type(4n+0) {margin-right:0;}
  </code></pre>
  
  <p>What this CSS selects is:</p>
  
  <pre><code>&lt;div id="content"&gt;
      &lt;div class="type-2"&gt;&lt;/div&gt;
      &lt;div class="type-2"&gt;&lt;/div&gt; &lt;!-- selected by .type-2:nth-of-type(2n+0) --&gt;
      &lt;div class="type-3"&gt;&lt;/div&gt; &lt;!-- selected by .type-3:nth-of-type(3n+0) --&gt;
      &lt;div class="type-3"&gt;&lt;/div&gt;
      &lt;div class="type-3"&gt;&lt;/div&gt;
      &lt;div class="type-4"&gt;&lt;/div&gt;
      &lt;div class="type-4"&gt;&lt;/div&gt;
      &lt;div class="type-4"&gt;&lt;/div&gt; &lt;!-- selected by .type-4:nth-of-type(4n+0) --&gt;
      &lt;div class="type-4"&gt;&lt;/div&gt;
      &lt;div class="type-2"&gt;&lt;/div&gt; &lt;!-- selected by .type-2:nth-of-type(2n+0) --&gt;
      &lt;div class="type-2"&gt;&lt;/div&gt;
      &lt;div class="type-3"&gt;&lt;/div&gt; &lt;!-- selected by .type-3:nth-of-type(3n+0) --&gt;
      &lt;div class="type-3"&gt;&lt;/div&gt;
      &lt;div class="type-3"&gt;&lt;/div&gt;
      &lt;div class="type-4"&gt;&lt;/div&gt;
      &lt;div class="type-4"&gt;&lt;/div&gt; &lt;!-- selected by .type-4:nth-of-type(4n+0) --&gt;
      &lt;div class="type-4"&gt;&lt;/div&gt;
      &lt;div class="type-4"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I can edit my HTML to achieve what I want, but just out of curiosity, is there some kind of CSS for this?</p>
  
  <p><strong>Edit:</strong> this question may look like a duplicate of questions asking if <code>nth-child</code> and <code>nth-of-type</code> can be applied to classes -- not elements. I already knew the answer is no. What I'm really asking for is a pure CSS solution/hack for it, and the chosen answer did just that.</p>