title: nth-of-type(2) is targeting the first of type?
body: <p>I have a relatively modular page but due to the CMS, the content for some of these paragraph blocks don't fill up the whole block, so I just want to increase the font size for some of the blocks. However, when I try to target 2 and 3, it doesn't seem to recognize it at all. In fact, it targets <em>only</em> the first one, and in my inspector, it says its because it's applying the rule for 2.</p>
  
  <p>Example HTML</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div class="item video"&gt;
          &lt;!-- HTML for video stuffs--&gt;
      &lt;/div&gt;
      &lt;div class="item copy"&gt;
          &lt;h1&gt;Example Title&lt;/h1&gt;
          &lt;p&gt;Example words&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="item photo"&gt;
          &lt;!-- HTML for photo stuffs--&gt;
      &lt;/div&gt;
      &lt;div class="item video"&gt;
          &lt;!-- HTML for video stuffs--&gt;
      &lt;/div&gt;
      &lt;div class="item copy"&gt;
          &lt;h1&gt;Example Title&lt;/h1&gt;
          &lt;p&gt;Example words&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="item photo"&gt;
          &lt;!-- HTML for photo stuffs--&gt;
      &lt;/div&gt;
      &lt;div class="item video"&gt;
          &lt;!-- HTML for video stuffs--&gt;
      &lt;/div&gt;
      &lt;div class="item copy"&gt;
          &lt;h1&gt;Example Title&lt;/h1&gt;
          &lt;p&gt;Example words&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="item photo"&gt;
          &lt;!-- HTML for photo stuffs--&gt;
      &lt;/div&gt;
      &lt;div class="item video"&gt;
          &lt;!-- HTML for video stuffs--&gt;
      &lt;/div&gt;
      &lt;div class="item copy"&gt;
          &lt;h1&gt;Example Title&lt;/h1&gt;
          &lt;p&gt;Example words&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="item photo"&gt;
          &lt;!-- HTML for photo stuffs--&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Now my LESS file looks like this:</p>
  
  <pre><code>.container {
      .item {
          &amp;.copy {
              p {
                  font-size: 16px;
              }
              &amp;:nth-of-type(2), &amp;:nth-of-type(3) {
                  p {
                      font-size: 17px;
                  }
              }
          }
      }
  }
  </code></pre>
  
  <p>Theoretically, the paragraph text in the first and fourth .copy blocks should have a font size of 16px, while the second and third blocks should be 17px. However, what I'm seeing is that all of them are 16px and the first one is 17px, with it highlighted saying that it's because the rule for ".container .item.copy:nth-of-type(2) p" is overwriting it.</p>
  
  <p>Why is the nth-of-type(2) rule targeting the first block of it's type and not the second? And why isn't the nth-of-type(3) rule not targeting the second block of it's type if that's how it's calculating them? I'm so confused as to what's happening here... Any help is much appreciated.</p>