How to override nth-child


Tags: html,css,css3,css-selectors

Problem :

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?



Solution :

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

    CSS Howto..

    How can I get this css to display correctly in Chrome?

    How to align an element applying css margins that does not get modified according to browsers and screen resolutions?

    Styling the input type=“file”. How do i display the filepath?

    How to override CSS style for a specific element if its parent has a specific class

    How to get rid of this whitespace in internet explorer?

    How to adjust 100% browser height and width with CSS?

    how to make zurb foundation framework off canvas look flat

    How to prepend a number before an HTML H2 with CSS?

    How to use the CSS :not selector for classes further up the DOM tree

    How do I make the rest of the page fade to black once my div loads and fade out once the div is closed?

    How to change a defined value to a unspecified value by css?

    How to make three DIV align vertical if not enough space horizontal

    How to position a css radial gradient to the top left responsively?

    How to center right-aligned numbers in table column using CSS?

    How to achieve mouseover effect where a hover div slides in from the side

    How can I simply freeze the first row of my table using pure Javascript, no plugins?

    How to debug html code for which css is being applied? [duplicate]

    how to put image on button? (css)

    How to understand this CSS inheritance (or override, selection)

    CSS/Javascript show image remove x on mouseover/hover

    How to Convert RGB to HEX ( for Gradients )

    How to make an entire div clickable with CSS [closed]

    How do I scroll d3 elements while keeping a portion of the svg in a fixed position?

    How to prevent this css shape to scroll left and right

    How to display data from a file on website load? [closed]

    How to make my PHP code, display in html table?

    How to combine multiple css framework with overpalling classes

    How to trigger css3 rotate effect by clicking?

    How do I make a dropdown extend to the left?

    How to style a table cell in JavaFX2 using CSS (without removing hover/selection etc.)