Using CSS :even and :odd pseudo-classes with list items

Is it possible to use CSS pseudo-classes on list items?

I’d expect the following to produce a list of alternating colors, but instead I get a list of blue items:

http://jsfiddle.net/K3TuN/

CSS:

li { color: blue }
li:nth-child(odd) { color:green }
li:nth-child(even) { color:red }

HTML:

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

Leave a comment