title: CSS :nth-child() selector in a PHP constructed site
body: <p>I have three CSS rules that define alternating styles, repeating every three items:</p>
  
  <pre><code>.container:nth-child(3n):after {
      /* Styleset 1 */
  }
  
  .container:nth-child(3n-1):after {
      /* Styleset 2 */
  }
  
  .container:nth-child(3n-2):after {
      /* Styleset 3 */
  }
  </code></pre>
  
  <p>These work flawlessly in simple static HTML pages.</p>
  
  <p>However, once applied to a website that writes multiple <code>div.container</code>s using a PHP <code>foreach</code> loop, the styles no longer alternate. Apparently only the <code>nth-child(3n-2)</code> style is now being applied to <em>all</em> <code>.container</code>s. The PHP looks like this:</p>
  
  <pre><code>&lt;?php foreach ($articles as $article) { ?&gt;
      &lt;div class="container"&gt;
          &lt;!-- Content creation --&gt;
      &lt;/div&gt;
  &lt;?php } ?&gt;
  </code></pre>
  
  <p>How does this happen?</p>