Is it possible to use CSS pseudo-classes to select even and odd instances of list items?
I'd expect the following to produce a list of alternating colors, but instead I get a list of blue items:
<html> <head> <style> li { color: blue } li:odd { color:green } li:even { color:red } </style> </head> <body> <ul> <li>ho</li> <li>ho</li> <li>ho</li> <li>ho</li> <li>ho</li> </ul> </body> </html> 9 Answers
li { color: black; } li:nth-child(odd) { color: #777; } li:nth-child(even) { color: blue; }<ul> <li>ho</li> <li>ho</li> <li>ho</li> <li>ho</li> <li>ho</li> </ul>Documentation:
6The problem with your CSS lies with the syntax of your pseudo-classes.
The even and odd pseudo-classes should be:
li:nth-child(even) { color:green; } and
li:nth-child(odd) { color:red; } Use this:
li { color:blue; } li:nth-child(odd) { color:green; } li:nth-child(even) { color:red; } See here for info on browser support:
li:nth-child(1n) { color:green; } li:nth-child(2n) { color:red; }<ul> <li>list element 1</li> <li>list element 2</li> <li>list element 3</li> <li>list element 4</li> </ul>See browser support here : CSS3 :nth-child() Selector
But it's not working in IE.
Recommend using :nth-child(2n+1) :nth-child(2n+2)
li { color: black; } li:nth-child(odd) { color: #777; } li:nth-child(even) { color: blue; }<ul> <li>ho</li> <li>ho</li> <li>ho</li> <li>ho</li> <li>ho</li> </ul>the css odd and even is not support for IE. recommend you using solution below.
Best solution:
li:nth-child(2n+1) { color:green; } // for odd li:nth-child(2n+2) { color:red; } // for even li:nth-child(1n) { color:green; } li:nth-child(2n) { color:red; } <ul> <li>list element 1</li> <li>list element 2</li> <li>list element 3</li> <li>list element 4</li> </ul> Below is the example of even and odd css color apply
<html> <head> <style> p:nth-child(even) { background: red; } p:nth-child(odd) { background: green; } </style> </head> <body> <p>The first Odd.</p> <p>The second Even.</p> <p>The third Odd.</p> <p>The fourth Even.</p> </body> </html> The :nth-child(n) selector matches every element that is the nth child, regardless of type, of its parent. Odd and even are keywords that can be used to match child elements whose index is odd or even (the index of the first child is 1).
this is what you want:
<html> <head> <style> li { color: blue }<br> li:nth-child(even) { color:red } li:nth-child(odd) { color:green} </style> </head> <body> <ul> <li>ho</li> <li>ho</li> <li>ho</li> <li>ho</li> <li>ho</li> </ul> </body> </html> <ul> <a href="javascript:void(0);"><span>1</span><li>Ashwin Nair</li></a> <a href="javascript:void(0);"><span>2</span><li>Anil Reddy</li></a> <a href="javascript:void(0);"><span>0</span><li>Chirag</li></a> <a href="javascript:void(0);"><span>0</span><li>Ashwin</li></a> <a href="javascript:void(0);"><span>0</span><li>Ashwin</li></a> <a href="javascript:void(0);"><span>0</span><li>Ashwin</li></a> <a href="javascript:void(0);"><span>5</span><li>Ashwin</li></a> <a href="javascript:void(0);"><span>6</span><li>Ashwin</li></a> <a href="javascript:void(0);"><span>1</span><li>Ashwin</li></a> <a href="javascript:void(0);"><span>2</span><li>Anil Reddy</li></a> <a href="javascript:void(0);"><span>0</span><li>Bhavesh</li></a> <a href="javascript:void(0);"><span>0</span><li>Ashwin</li></a> <a href="javascript:void(0);"><span>0</span><li>Ashwin</li></a> <a href="javascript:void(0);"><span>0</span><li>Ashwin</li></a> <a href="javascript:void(0);"><span>5</span><li>Ashwin</li></a> <a href="javascript:void(0);"><span>6</span><li>Ashwin</li></a> <a href="javascript:void(0);"><span>1</span><li>Ashwin</li></a> </ul> $(document).ready(function(){ var a=0; var ac; var ac2; $(".names li").click(function(){ var b=0; if(a==0) { var accc="#"+ac2; if(ac=='part2') { $(accc).css({ "background": "#322f28", "color":"#fff", }); } if(ac=='part1') { $(accc).css({ "background": "#3e3b34", "color":"#fff", }); } $(this).css({ "background":"#d3b730", "color":"#000", }); ac=$(this).attr('class'); ac2=$(this).attr('id'); a=1; } else{ var accc="#"+ac2; //alert(accc); if(ac=='part2') { $(accc).css({ "background": "#322f28", "color":"#fff", }); } if(ac=='part1') { $(accc).css({ "background": "#3e3b34", "color":"#fff", }); } a=0; ac=$(this).attr('class'); ac2=$(this).attr('id'); $(this).css({ "background":"#d3b730", "color":"#000", }); } }); 
