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>
This question is related to
html
css
css-selectors
Use this:
li { color:blue; }
li:nth-child(odd) { color:green; }
li:nth-child(even) { color:red; }
See here for info on browser support: http://kimblim.dk/css-tests/selectors/
li:nth-child(1n) { color:green; }_x000D_
li:nth-child(2n) { color:red; }
_x000D_
<ul>_x000D_
<li>list element 1</li>_x000D_
<li>list element 2</li>_x000D_
<li>list element 3</li>_x000D_
<li>list element 4</li>_x000D_
</ul>
_x000D_
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 {_x000D_
color: black;_x000D_
}_x000D_
li:nth-child(odd) {_x000D_
color: #777;_x000D_
}_x000D_
li:nth-child(even) {_x000D_
color: blue;_x000D_
}
_x000D_
<ul>_x000D_
<li>ho</li>_x000D_
<li>ho</li>_x000D_
<li>ho</li>_x000D_
<li>ho</li>_x000D_
<li>ho</li>_x000D_
</ul>
_x000D_
The 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;
}
<ul class="names" id="names_list">
<a href="javascript:void(0);"><span class="badge">1</span><li class="part1" id="1">Ashwin Nair</li></a>
<a href="javascript:void(0);"><span class="badge">2</span><li class="part2" id="2">Anil Reddy</li></a>
<a href="javascript:void(0);"><span class="badge">0</span><li class="part1" id="3">Chirag</li></a>
<a href="javascript:void(0);"><span class="badge">0</span><li class="part2" id="4">Ashwin</li></a>
<a href="javascript:void(0);"><span class="badge">0</span><li class="part1" id="15">Ashwin</li></a>
<a href="javascript:void(0);"><span class="badge">0</span><li class="part2" id="16">Ashwin</li></a>
<a href="javascript:void(0);"><span class="badge">5</span><li class="part1" id="17">Ashwin</li></a>
<a href="javascript:void(0);"><span class="badge">6</span><li class="part2" id="18">Ashwin</li></a>
<a href="javascript:void(0);"><span class="badge">1</span><li class="part1" id="19">Ashwin</li></a>
<a href="javascript:void(0);"><span class="badge">2</span><li class="part2" id="188">Anil Reddy</li></a>
<a href="javascript:void(0);"><span class="badge">0</span><li class="part1" id="111">Bhavesh</li></a>
<a href="javascript:void(0);"><span class="badge">0</span><li class="part2" id="122">Ashwin</li></a>
<a href="javascript:void(0);"><span class="badge">0</span><li class="part1" id="133">Ashwin</li></a>
<a href="javascript:void(0);"><span class="badge">0</span><li class="part2" id="144">Ashwin</li></a>
<a href="javascript:void(0);"><span class="badge">5</span><li class="part1" id="199">Ashwin</li></a>
<a href="javascript:void(0);"><span class="badge">6</span><li class="part2" id="156">Ashwin</li></a>
<a href="javascript:void(0);"><span class="badge">1</span><li class="part1" id="174">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",
});
}
});
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>
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 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>
Source: Stackoverflow.com