How to select even or odd rows in a table using CSS 3

CSS 3 is around the corner. Already we are seeing some benefits. The latest versions of Safari and Opera, as well as the beta version of Firefox allow you to select even or odd rows in a table using only CSS:


tr:nth-child(2n+1) {
background-color: blue;
}
tr:nth-child(2n) {
background-color: red;
}

See? No ECMAScript, no server-side programming. Alas, no sign of support for this in Internet Explorer.

2 Comments

  1. When you say IE support, which versions? ie6+, ie7+, ie8+?

    Comment by staiano — 23/8/2008 @ 14:52

  2. I do not think it is supported by any version of IE.

    Comment by Daniel Lemire — 23/8/2008 @ 17:20

RSS feed for comments on this post.

Sorry, the comment form is closed at this time.

« Blog's main page

Additional comments powered by BackType

18 queries. 0.359 seconds. Valid XHTML

Powered by WordPress

© 2004-2009, Daniel Lemire (lemire at acm dot org). This work is licensed under a Creative Commons License.

Subscribe to this blog in a reader or by Email.