title: How to override nth-child
body: <p>Lets assume I have this simplified HTML tree:</p>
  
  <pre><code> &lt;ul&gt;
     &lt;li&gt;Item 1&lt;/li&gt;
     &lt;li&gt;Item 2&lt;/li&gt;         
     &lt;li&gt;Item 3&lt;/li&gt;
      .
      .
      .
     &lt;li&gt;Item n&lt;/li&gt;
   &lt;/ul&gt;
  </code></pre>
  
  <p>And this CSS style:</p>
  
  <pre><code>ul li:nth-child(2n){ background-color: blue; }
  </code></pre>
  
  <p>I have no access to this selector, and so I want to override it to be</p>
  
  <pre><code>ul li:nth-child(3n){ background-color: red; }
  </code></pre>
  
  <p>However, this affects <strong>both every 2nd, as well as every 3rd element</strong>.
  Here's a <a href="http://jsfiddle.net/opherv/ymyqx/" rel="nofollow">js-fiddle</a> example.</p>
  
  <p>How can I override an nth-child psuedoselector with a new formula, so that only my new formula (3n) takes effect?</p>