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    lt html gt       lt head gt           lt style gt              li   color  blue               li odd   color green               li even   color red            lt  style gt       lt  head gt       lt body gt           lt ul gt               lt li gt ho lt  li gt               lt li gt ho lt  li gt               lt li gt ho lt  li gt               lt li gt ho lt  li gt               lt li gt ho lt  li gt           lt  ul gt       lt  body gt   lt  html gt

User · Answer

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

User · Answer

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       lt ul gt     lt li gt list element 1 lt  li gt     lt li gt list element 2 lt  li gt     lt li gt list element 3 lt  li gt     lt li gt list element 4 lt  li gt   lt  ul gt

User · Answer

Below is the example of even and odd css color apply   lt html gt   lt head gt   lt style gt   p nth-child even        background  red    p nth-child odd        background  green     lt  style gt   lt  head gt   lt body gt    lt p gt The first Odd  lt  p gt   lt p gt The second Even  lt  p gt   lt p gt The third Odd  lt  p gt   lt p gt The fourth Even  lt  p gt     lt  body gt   lt  html gt

User · Answer

but it s not working in IE  recommend using   nth-child 2n 1   nth-child 2n 2    x000D   x000D  li   x000D      color  black  x000D    x000D  li nth-child odd    x000D      color   777  x000D    x000D  li nth-child even    x000D      color  blue  x000D    x000D   lt ul gt  x000D       lt li gt ho lt  li gt  x000D       lt li gt ho lt  li gt  x000D       lt li gt ho lt  li gt  x000D       lt li gt ho lt  li gt  x000D       lt li gt ho lt  li gt  x000D   lt  ul gt  x000D   x000D   x000D

User · Answer

Demo  http   jsfiddle net thirtydot K3TuN 1323    x000D   x000D  li   x000D      color  black  x000D    x000D  li nth-child odd    x000D      color   777  x000D    x000D  li nth-child even    x000D      color  blue  x000D    x000D   lt ul gt  x000D       lt li gt ho lt  li gt  x000D       lt li gt ho lt  li gt  x000D       lt li gt ho lt  li gt  x000D       lt li gt ho lt  li gt  x000D       lt li gt ho lt  li gt  x000D   lt  ul gt  x000D   x000D   x000D    Documentation    https   developer mozilla org en-US docs Web CSS  nth-child http   caniuse com css-sel3  it works almost everywhere

User · Answer

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

User · Answer

x000D   x000D  li nth-child 1n    color green    x000D  li nth-child 2n    color red    x000D   lt ul gt  x000D     lt li gt list element 1 lt  li gt  x000D     lt li gt list element 2 lt  li gt  x000D     lt li gt list element 3 lt  li gt  x000D     lt li gt list element 4 lt  li gt  x000D   lt  ul gt  x000D   x000D   x000D    See browser support here   CSS3  nth-child   Selector

User · Answer

lt ul class  names  id  names list  gt             lt a href  javascript void 0    gt  lt span class  badge  gt 1 lt  span gt  lt li class  part1  id  1  gt Ashwin Nair lt  li gt  lt  a gt              lt a href  javascript void 0    gt  lt span class  badge  gt 2 lt  span gt  lt li class  part2  id  2  gt Anil Reddy lt  li gt  lt  a gt              lt a href  javascript void 0    gt  lt span class  badge  gt 0 lt  span gt  lt li class  part1  id  3  gt Chirag lt  li gt  lt  a gt              lt a href  javascript void 0    gt  lt span class  badge  gt 0 lt  span gt  lt li class  part2  id  4  gt Ashwin lt  li gt  lt  a gt              lt a href  javascript void 0    gt  lt span class  badge  gt 0 lt  span gt  lt li class  part1  id  15  gt Ashwin lt  li gt  lt  a gt               lt a href  javascript void 0    gt  lt span class  badge  gt 0 lt  span gt  lt li class  part2  id  16  gt Ashwin lt  li gt  lt  a gt              lt a href  javascript void 0    gt  lt span class  badge  gt 5 lt  span gt  lt li class  part1  id  17  gt Ashwin lt  li gt  lt  a gt              lt a href  javascript void 0    gt  lt span class  badge  gt 6 lt  span gt  lt li class  part2  id  18  gt Ashwin lt  li gt  lt  a gt              lt a href  javascript void 0    gt  lt span class  badge  gt 1 lt  span gt  lt li class  part1  id  19  gt Ashwin lt  li gt  lt  a gt              lt a href  javascript void 0    gt  lt span class  badge  gt 2 lt  span gt  lt li class  part2  id  188  gt Anil Reddy lt  li gt  lt  a gt              lt a href  javascript void 0    gt  lt span class  badge  gt 0 lt  span gt  lt li class  part1  id  111  gt Bhavesh lt  li gt  lt  a gt              lt a href  javascript void 0    gt  lt span class  badge  gt 0 lt  span gt  lt li class  part2  id  122  gt Ashwin lt  li gt  lt  a gt              lt a href  javascript void 0    gt  lt span class  badge  gt 0 lt  span gt  lt li class  part1  id  133  gt Ashwin lt  li gt  lt  a gt               lt a href  javascript void 0    gt  lt span class  badge  gt 0 lt  span gt  lt li class  part2  id  144  gt Ashwin lt  li gt  lt  a gt              lt a href  javascript void 0    gt  lt span class  badge  gt 5 lt  span gt  lt li class  part1  id  199  gt Ashwin lt  li gt  lt  a gt              lt a href  javascript void 0    gt  lt span class  badge  gt 6 lt  span gt  lt li class  part2  id  156  gt Ashwin lt  li gt  lt  a gt              lt a href  javascript void 0    gt  lt span class  badge  gt 1 lt  span gt  lt li class  part1  id  174  gt Ashwin lt  li gt  lt  a gt             lt  ul gt        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

User · Answer

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    lt html gt       lt head gt           lt style gt              li   color  blue   lt br gt              li nth-child even    color red               li nth-child odd    color green           lt  style gt       lt  head gt       lt body gt           lt ul gt               lt li gt ho lt  li gt               lt li gt ho lt  li gt               lt li gt ho lt  li gt               lt li gt ho lt  li gt               lt li gt ho lt  li gt           lt  ul gt       lt  body gt   lt  html gt

[html] How can I style even and odd elements?

Examples related to html

Examples related to css

Examples related to css-selectors