How can I style even and odd elements?

html css css-selectors

Armand · Feb 22, 2011 · Viewed 429.3k times · Source

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>

Answer

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)

How can I style even and odd elements?

Answer

Related questions