HTML5 and CSS3, Second Edition

Tip 10

Styling Tables with Pseudoclasses

A pseudoclass in CSS is a way to select elements based on information that

lies outside the document or information that can’t be expressed using normal

selectors. You’ve probably used pseudoclasses like :hover before to change the

color of a link when the user hovers over it with the mouse pointer. CSS3 has

several new pseudoclasses that make locating elements much easier.

AwesomeCo uses a third-party billing and invoicing system for products it

ships. You see, one of AwesomeCo’s biggest markets is conference swag, such

as pens, cups, shirts, and anything else you can slap your logo on. You’ve

been asked to make the invoice more readable. Right now, the developers are

producing a standard HTML table that looks like the one in the figure here.

Figure 8—The current invoice uses an unstyled HTML table.

It’s a pretty standard invoice with prices, quantities, row totals, a subtotal,

a shipping total, and a grand total for the order. It would be easier to read if

every other row were colored differently. It would also be helpful if the grand

total were a different color so that it stands out more.

The code for the table looks like this. Copy it into your own file so you can

work with it.

css3_advanced_selectors/index.html

<table>

<tr>

<th>Item</th>

<th>Price</th>

report erratum • discuss

Styling Tables with Pseudoclasses • 69

Download from Wow! eBook <www.wowebook.com>