The CSS3 Wonderdrug

9 Mar

For years there has been generally only one way to alternate row colours in a HTML table: write a script that does a mod 2 on the result number to figure out what the background colour should be. I have been the “UI expert” on so many projects in my career I can’t count the number of times I’ve had to write such scripts, whether it be in Java, JSP, ASP, JHTML or some other custom markup-language.

Thankfully, we can soon do away with such scripts! There is a new feature in CSS3 – the:nth-child() pseudo class – that allows the selection of specific elements of a top-level HTML tag such as TR and P. Therefore you can do such things as:

TR :nth-child(2n) { background-color: #cccccc; }

or, you could use the convenience selectors “even” and “odd”:

P :nth-child(odd) { background-color: #cccccc; }

There are a lot more things you can do, such as alternating 3 rows, or selecting only every 5th element. Not to mention the other new selector features in CSS3 and additions to other areas such as TV, speech and print media support, and changes to fonts, backgrounds, boxes and hyperlinks. If only browser producers would all standardise and support CSS3 in the same way, when it is finally released…. Hell, I’d be happy with IE supporting CSS2.1 for now…

 

Facebook Twitter Email

No related posts.

One Response to “The CSS3 Wonderdrug”

  1. Robert Watkins March 12, 2004 at 11:14 pm #

    I will be _so_ glad when this gets some traction behind it. I’m sick and tired of using scripts or code (complicated or otherwise) to do what should be presentation information. You want a table? Pick a style and away you go.

    Things like the JDisplay tag help a lot, but CSS3 sounds like a big step forward for this…

    Nice site, BTW, Pam. As usual, I’m in awe of your web skills. ;)