title: Destroy or recalculate CSS nth-child selector
body: <p><strong>Context</strong>:</p>
  <p>I have a list. Using jQuery, I'm dynamically...</p>
  <ol>
  <li>...hiding/showing certain list-items.</li>
  <li>...calculating the third and fourth list-items to apply specific classes.</li>
  </ol>
  <p><strong>Problem</strong>:</p>
  <p>A CSS style (from a stylesheet), using an nth-child selector, is being applied to every third list item. The problem is that when I dynamically hide/show list items, the CSS nth-child selector doesn't seem to be recalculating.</p>
  <p>Since jQuery is already calculating the third list item, I don't need to recalculate the CSS nth-child selector unless there is no means of cancelling it out or destroying it.</p>
  <p><strong>Code</strong>:</p>
  <p><strong>The mark-up:</strong></p>
  <pre><code>&lt;ul class=&quot;teamlist&quot;&gt;
      &lt;li&gt;Content&lt;/li&gt;
      &lt;li&gt;Content&lt;/li&gt;
      &lt;li&gt;Content&lt;/li&gt;
      &lt;li&gt;Content&lt;/li&gt;
      &lt;li&gt;Content&lt;/li&gt;
      &lt;li&gt;Content&lt;/li&gt;
      &lt;li&gt;Content&lt;/li&gt;
      &lt;li&gt;Content&lt;/li&gt;
      &lt;li&gt;Content&lt;/li&gt;
      &lt;li&gt;Content&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  <p><strong>The jQuery:</strong></p>
  <pre><code>$('.teamlist li:visible').each(function (i) {
      if (i % 3 == 0) $(this).addClass('teamlist_fourth_item');
  });
  $('.teamlist li:visible').each(function (i) {
     if ((i+1) % 3 == 0) $(this).addClass('teamlist_third_item');
  });
  </code></pre>
  <p><strong>The unwanted CSS:</strong></p>
  <pre><code>.teamlist li:nth-child(3n+3) {
      margin-right: 0;
  }
  </code></pre>
  <p><strong>Question</strong>:</p>
  <p>How do I destroy or force the recalculation of CSS nth-child selector?</p>