October 23, 2003
CSS3 is going to be really great.
The new nth-child() selector, for instance, is going to greatly simplify the selection of even and odd numbered table rows. Currently, I assign a class to every even numbered table row, <tr class="even">, and to every odd numbered table row, <tr class="odd"> and style it with CSS, producing this:
| Header 1 | Header 2 | Header 3 | |
|---|---|---|---|
| Row 1 | Cell 1 | Cell 2 | Cell 3 |
| Row 2 | Cell 1 | Cell 2 | Cell 3 |
| Row 3 | Cell 1 | Cell 2 | Cell 3 |
| Row 4 | Cell 1 | Cell 2 | Cell 3 |
| Row 5 | Cell 1 | Cell 2 | Cell 3 |
The problem arises if I've got a very large table and need to put in an extra row in the middle of the table somewhere. Doing that means I have to change the class for x <tr>s downward in the table. That's very tedious and boring work, not to mention a big waste of time (unless you're inserting an even number of new rows, of course). This is where CSS3 comes and saves the day. Using the nth-child() pseudo-class, I could do tr:nth-child(even) (which is equivalent to tr:nth-child(2n)) and tr:nth-child(odd) (which is equivalent to tr:nth-child(2n+1)).
The border module looks extremely interesting; the border-radius property will allow me to add borders with round corners and border-image will allow me to add separate images for all the sides and corners of a box.
CSS3 will truly take the concept of separating presentation from content and structure one huge step forward.