title: Color every Nth line in a SVG group
body: <p>I'm trying to use css to color a series of lines in a svg group, with every 5th line to be a different color. What I have correctly colours the 5th line, but doesn't for the following 10th, 15th, ect. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code> .grid {
    stroke: cyan;
   }
   .grid:nth-of-type(5) {
    stroke: magenta;
   }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;svg xmlns="http://www.w3.org/2000/svg" width="500" height="600"&gt;
  &lt;g class="gridContainer"&gt;
    &lt;line x1="18" y1="0" x2="18" y2="600" stroke-width="2" class="grid"&gt;&lt;/line&gt;
    &lt;line x1="36" y1="0" x2="36" y2="600" stroke-width="2" class="grid"&gt;&lt;/line&gt;
    &lt;line x1="54" y1="0" x2="54" y2="600" stroke-width="2" class="grid"&gt;&lt;/line&gt;
    &lt;line x1="72" y1="0" x2="72" y2="600" stroke-width="2" class="grid"&gt;&lt;/line&gt;
    &lt;line x1="90" y1="0" x2="90" y2="600" stroke-width="2" class="grid"&gt;&lt;/line&gt;
    &lt;line x1="108" y1="0" x2="108" y2="600" stroke-width="2" class="grid"&gt;&lt;/line&gt;
    &lt;line x1="126" y1="0" x2="126" y2="600" stroke-width="2" class="grid"&gt;&lt;/line&gt;
    &lt;line x1="144" y1="0" x2="144" y2="600" stroke-width="2" class="grid"&gt;&lt;/line&gt;
    &lt;line x1="162" y1="0" x2="162" y2="600" stroke-width="2" class="grid"&gt;&lt;/line&gt;
    &lt;line x1="180" y1="0" x2="180" y2="600" stroke-width="2" class="grid"&gt;&lt;/line&gt;
    &lt;line x1="198" y1="0" x2="198" y2="600" stroke-width="2" class="grid"&gt;&lt;/line&gt;
    &lt;line x1="216" y1="0" x2="216" y2="600" stroke-width="2" class="grid"&gt;&lt;/line&gt;
    &lt;line x1="234" y1="0" x2="234" y2="600" stroke-width="2" class="grid"&gt;&lt;/line&gt;
    &lt;line x1="252" y1="0" x2="252" y2="600" stroke-width="2" class="grid"&gt;&lt;/line&gt;
    &lt;line x1="270" y1="0" x2="270" y2="600" stroke-width="2" class="grid"&gt;&lt;/line&gt;
    &lt;line x1="288" y1="0" x2="288" y2="600" stroke-width="2" class="grid"&gt;&lt;/line&gt;
    &lt;line x1="306" y1="0" x2="306" y2="600" stroke-width="2" class="grid"&gt;&lt;/line&gt;
  &lt;/g&gt;
  &lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>