Question

Lets assume I have this simplified HTML tree:

 <ul>
   <li>Item 1</li>
   <li>Item 2</li>         
   <li>Item 3</li>
    .
    .
    .
   <li>Item n</li>
 </ul>

And this CSS style:

ul li:nth-child(2n){ background-color: blue; }

I have no access to this selector, and so I want to override it to be

ul li:nth-child(3n){ background-color: red; }

However, this affects both every 2nd, as well as every 3rd element.
Here’s a js-fiddle example.

How can I override an nth-child psuedoselector with a new formula, so that only my new formula (3n) takes effect?

Answer 1

ul li:nth-child(3n){ background-color: transparent; }
ul li:nth-child(2n){ background-color: red; }