Styling Items Based On Their Position In An Ordered List

[firago]

I was wondering if it were possible to style a list item based on its' position in an ordered list. Something like:

<ol>
<li>Two Pigs</li>
<li>One Cow</li>
<li>Four Goats</li>
</ol>
li:first-item {color:red}
li:second-item {color:green}
li:third-item {color:blue}

[VIPStephan]

Not yet. I will be possible with the release of CSS 3 (and proper browser support, of course): http://www.w3.org/TR/2001/CR-css3-selectors-20011113/#nth-child-pseudo

Currently you can only do it with JavaScript or by assigning each element an ID or class and styling them specifically.

If you don’t care for IE 6 you can even use the sibling selector to achieve a similar effect. It could get a little nasty with long lists, though:

li {…}
li + li {…}
li + li + li {…}
…etc.…