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 do I use the Bootstrap form select css with a Rails model?

    How do I return the box height to original state when clicked again in JQuery?

    Thai line breaking: how to break Thai text effectively

    How can I add a fixed sidebar to a web page?

    CSS - how to make the div display as shorter list box?

    How to remove the shadow effect of textbox in CSS? [closed]

    Css accordion menu, how to set height to automatic?

    views_slideshow controls modification Drupal 7

    How to get a label under an underlined word in css? [closed]

    CSS How to I align a header with a height of 2em to the bottom

    How to add css only to options page of a plugin in wordpress?

    How to use css with UIWebView?

    How can i fill a paragraph (until end of line) with dashes using CSS

    How to set css error-styles programatically on a TextBox

    How to capture extra css class in addition to the pseduo class in this less (css) code?

    How to make somethings like this in CSS?

    How to have the cutout of a div at the bottom right with shadow to the left

    How can I make a fixed div JUMP when scrolling?

    how to use css to make smartgwt look like gwtext

    How to divide a menu horizontaly between buttons , using CSS?

    How can I trigger a jQuery alert when an iframe AND its CSS is loaded and rendered?

    Showing an hidden element with an opacity-animation

    How do I get my header to align with my navigation bar at the center of my page?

    how to “replace” css Properties with jQuery

    element doesn't show padding in Opera, Safari, IE

    How to do Hanging Punctuation in HTML / CSS

    How to add content to an input with css? [duplicate]

    How do I get ui-sortable to only work on a specific id in CSS?

    How to set image in horizontal center of DIV to fill page width?

    Showing responsive menu link that is not shown in regular navigation menu