How can I style even and odd elements?

Question

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:

li { color: blue }
li:odd { color:green }
li:even { color:red }

<ul>
    <li>ho</li>
    <li>ho</li>
    <li>ho</li>
    <li>ho</li>
    <li>ho</li>
  </ul>

thirtydot · Accepted Answer · 2016-05-13 08:02:52Z

830

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>

Documentation:

https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child
http://caniuse.com/css-sel3 (it works almost everywhere)

edited May 13, 2016 at 8:02

answered Feb 22, 2011 at 16:18

thirtydot

227k49 gold badges391 silver badges352 bronze badges

33

Just a note perhaps: nth-child isn't supported by IE 8 and below.
– MEM
Commented Sep 27, 2012 at 10:14
1

You can use the Selectivzr polyfill if you need to support IE8... and IE6/7 as well.
– Ricardo Zea
Commented Apr 5, 2013 at 18:29
2

Just confirmed that even with Selectivizr :nth-child(odd/even) does not work in IE8.
– Ricardo Zea
Commented Apr 5, 2013 at 18:46
7

True, it doesn't work in IE8 as documented here: caniuse.com/#feat=css-sel3 but it does work on every major browser.
– aaron-coding
Commented Feb 18, 2015 at 23:35
3

After all IE8 Support is nothing to worry about anymore in this case as the intended behaviour is just 'supportive'. It does not prevent the user from using the site nor from finding information. It doesn't even (most likely not) spoil the overall appearance of the website.
– Hafenkranich
Commented Apr 19, 2016 at 19:47

| Show 1 more comment

Andreas Louv · Accepted Answer · 2012-11-23 14:04:22Z

65

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;
}

Demo: http://jsfiddle.net/q76qS/5/

edited Nov 23, 2012 at 14:04

Andreas Louv

46.8k13 gold badges104 silver badges123 bronze badges

answered Feb 22, 2011 at 16:15

Kevin Gurney

1,43111 silver badges20 bronze badges

Add a comment |

Pang · Accepted Answer · 2023-10-25 01:29:00Z

26

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/

edited Oct 25, 2023 at 1:29

Pang

9,934146 gold badges85 silver badges124 bronze badges

answered Feb 22, 2011 at 16:17

Dan S

8256 silver badges7 bronze badges

Add a comment |

Minal Chauhan · Accepted Answer · 2021-05-03 07:06:39Z

14

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>

edited May 3, 2021 at 7:06

Minal Chauhan

6,13012 gold badges22 silver badges41 bronze badges

answered Dec 26, 2018 at 7:11

Minh_Bu

3153 silver badges6 bronze badges

Add a comment |

Minh_Bu · Accepted Answer · 2019-01-08 03:05:29Z

7

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>

edited Jan 8, 2019 at 3:05

answered Dec 26, 2018 at 7:06

Minh_Bu

3153 silver badges6 bronze badges

Add a comment |

Daniel Iftimie · Accepted Answer · 2016-03-15 07:57:14Z

5

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

answered Mar 15, 2016 at 7:57

Daniel Iftimie

2354 silver badges7 bronze badges

Add a comment |

Sheo Dayal Singh · Accepted Answer · 2017-06-26 16:42:58Z

1

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>

edited Jun 26, 2017 at 16:42

answered Jun 25, 2017 at 16:57

Sheo Dayal Singh

1,64320 silver badges11 bronze badges

Add a comment |

Agboola Feyikemi · Accepted Answer · 2020-02-03 08:57:13Z

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>

Subroto Biswas · Accepted Answer · 2023-11-10 15:41:09Z

1

Working: nth child with number and odd even

.ziehharmonika:nth-child(1) h3 {  /*select number one child*/
    background-color: green;
}

.ziehharmonika:nth-child(odd) h3 {
    background-color: red;
}

.ziehharmonika:nth-child(even) h3 {
    background-color: yellow;
}

answered Nov 10, 2023 at 15:41

Subroto Biswas

6118 silver badges5 bronze badges

Add a comment |

Ashwin Vinod Krishnan · Accepted Answer · 2017-03-27 12:56:50Z

 <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",
            });

            }

        });

This is just ... Horrible. There are so many better ways to target even/odd elements. Furthermore, there's no reason to use JavaScript like this when two lines of CSS would accomplish the same thing. — Dustin Halstead, Commented Feb 21, 2018 at 19:18

Collectives™ on Stack Overflow

How can I style even and odd elements?

10 Answers 10

Not the answer you're looking for? Browse other questions tagged
html
css
css-selectors
or ask your own question.

Linked

Hot Network Questions

Collectives™ on Stack Overflow

10 Answers 10

Not the answer you're looking for? Browse other questions tagged htmlcsscss-selectors or ask your own question.

Linked

Related

Not the answer you're looking for? Browse other questions tagged
html
css
css-selectors
or ask your own question.