Previous Message
Next Message

Re: [css-d] alternating row colors in CSS

Sent by Joel Goldstick (Software Consulting) on 10 June 2003 02:02


>From Craig:
CSS3, from the spec (won't work in most browsers, including Mozilla):
 tr:nth-child(2n+1) /* represents every odd row of a HTML table */
 tr:nth-child(odd)  /* same */
 tr:nth-child(2n)   /* represents every even row of a HTML table */
 tr:nth-child(even) /* same */
<http://www.w3.org/TR/css3-selectors/#structural-pseudos>

CSS2, the easiest thing to do is apply a class to every other row, and
style that.

Or you can count the rows, and use an adjacent sibling selector, so for:
 <table>
  <tr><td>Hello</td></tr>
  <tr><td>there,</td></tr>
  <tr><td>how </td></tr>
  <tr><td>are </td></tr>
  <tr><td>you</td></tr>
  <tr><td>today?</td></tr>
 </table>

This CSS will colour every other row's background red:
 tr+tr, tr+tr+tr+tr, tr+tr+tr+tr+tr+tr { background: red; }
 tr+tr+tr, tr+tr+tr+tr+tr { background: inherit; }

I certainly got reminded about id vs. class.  Oops!  But I was wondering if
there was a way to do it with selectors.  If you don't have control over the
html creation, Craig's second method looks pretty fun.  But it won't work in
ie will it?

Joel Goldstick.

______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Previous Message
Next Message

Message thread:

Possibly related: