Usando pseudo-clases CSS:even y:odd con elementos de lista
¿Es posible usar pseudo-clases CSS en elementos de lista?
Esperaría que lo siguiente produjera una lista de colores alternos, pero en su lugar obtengo una lista de elementos azules:
<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>
238
6 answers
Demo: http://jsfiddle.net/thirtydot/K3TuN/1323 /
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>
Documentación:
- https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child
- http://caniuse.com/css-sel3 (funciona casi en todas partes)
542
Author: thirtydot,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-05-13 08:02:52
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-05-13 08:02:52
El problema con su CSS radica en la sintaxis de sus pseudo-clases.
Las pseudo-clases pares e impares deberían ser:
li:nth-child(even) {
color:green;
}
Y
li:nth-child(odd) {
color:red;
}
42
Author: Kevin Gurney,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-11-23 14:04:22
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-11-23 14:04:22
Usa esto:
li { color:blue; }
li:nth-child(odd) { color:green; }
li:nth-child(even) { color:red; }
Consulte aquí para obtener información sobre el soporte del navegador: http://kimblim.dk/css-tests/selectors /
18
Author: Dan S,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-02-22 16:17:33
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-02-22 16:17:33
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>
Consulte el soporte del navegador aquí : CSS3: nth-child() Selector
3
Author: iDaniel88,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-03-15 07:57:14
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-03-15 07:57:14
A continuación se muestra el ejemplo de color css par e impar 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>
-1
Author: Sheo Dayal Singh,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-06-26 16:42:58
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-06-26 16:42:58
<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",
});
}
});
-2
Author: Ashwin Vinod Krishnan,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-03-27 12:56:50
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-03-27 12:56:50