title: :nth-child() target every third item
body: <p>I'm trying to target every 1st, 2nd and 3rd <code>.pricing-example</code> on a page, in order to apply a different background colour to each. However, using the code below, when 3 <code>.pricing-example</code> elements are on a page, <code>nth-child(1n)</code> targets item 1 &amp; 3, and <code>nth-child(3n)</code> targets item 2, which I don't understand. What I am trying to achieve is to enable a different background colour on every third item, so as follows:</p>
  
  <ul>
  <li>Item 1 = Background 1 </li>
  <li>Item 2 = Background 2 </li>
  <li>Item 3 = Background 3</li>
  <li>Item 4 = Background 1</li>
  <li>Item 5 = Background 2</li>
  <li>Item 6 = Background 3</li>
  <li>Item 7 = Background 1</li>
  <li>and so on....</li>
  </ul>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="blocks"&gt;
      &lt;figure class="custom-block image"&gt;&lt;/figure&gt;
      &lt;figure class="custom-block text"&gt;&lt;/figure&gt;
      &lt;figure class="custom-block pricing-example"&gt;&lt;/figure&gt;
      &lt;figure class="custom-block pricing-example"&gt;&lt;/figure&gt;
      &lt;figure class="custom-block pricing-example"&gt;&lt;/figure&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.pricing-example {
  
      // Alternate background colours of images when multiple blocks
      &amp;:nth-child(1n) {
          background-color: red;
      }
      &amp;:nth-child(2n) {
          background-color: blue;
      }
      &amp;:nth-child(3n) {
          background-color: green;
      }
  }
  </code></pre>