title: nth-of-type vs nth-child
body: <p>I am a bit confused about the <code>nth-of-type</code> pseudo class, and how this is supposed to work - especially as compared to the <code>nth-child</code> class.</p>
  
  <p>Maybe I have the wrong idea, but given this structure</p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;div class="icon"&gt;A&lt;/div&gt;
      &lt;div class="icon"&gt;B&lt;/div&gt;
      &lt;div class="label"&gt;1&lt;/div&gt;
      &lt;div class="label"&gt;2&lt;/div&gt;
      &lt;div class="label"&gt;3&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>..the third child element (first with class label) should (perhaps?) be selectable with</p>
  
  <pre><code>.row .label:nth-of-type(1) {
      /* some rules */
  }
  </code></pre>
  
  <p>However, at least in chrome here, it doesn't select it. It only appears to work if it is the first child in the row, which is the same as <code>nth-child</code> - therefore, what is the difference between this and <code>nth-of-type</code>?</p>