HTML5 and CSS3, Second Edition

Here we’re specifying a specific child, the second to the last.

There’s one more thing we should do with this table, though. Earlier we right-

aligned all the columns except for the first column, and although that looks

fine for the rows of the table with the item descriptions and prices, it makes

the last three rows of the table look a little funny. Let’s right-align the bottom

three rows as well. We can do that by using nth-last-child with a negative value

for n and a positive value for a in our formula, like this:

css3_advanced_selectors/stylesheets/style.css

tr:nth-last-child(-n+3)td{

text-align:right;

}

You can think of this as a range selector; it’s using the offset of 3, and since

we’re using nth-last-child, it’s grabbing every element before the offset. If you

were using nth-child, this formula would grab every row up to the offset.

Our newly styled table (see the next figure) looks much better now, and we

didn’t have to change the underlying markup one bit.

Figure 9—Our styled table, with striping and alignment done entirely with CSS3

Many of the selectors we used to accomplish this are not yet available to

people using Internet Explorer, so we need a workaround for them.

Falling Back

Current versions of Internet Explorer, Opera, Firefox, Safari, and Chrome all

understand these selectors, but Internet Explorer 8 and earlier will ignore

these entirely. You’ll need a good fallback solution, and you have a choice to

make.

Do Nothing

The easiest solution is to do nothing. Since the content would be completely

readable without the additional styling we’re providing, we could just leave

report erratum • discuss

Styling Tables with Pseudoclasses • 75

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