HTML5 and CSS3, Second Edition

If you wanted every third row, you’d use 3n.

You can also use the offset so that you can start further down the table. This

selector would find every other row, starting with the fourth row:

tabletr:nth-child(2n+4)

So, we can align every column except the first one with this rule:

css3_advanced_selectors/stylesheets/style.css

td:nth-child(n+2),th:nth-child(n+2){

text-align:right;

}

We use two selectors separated by a comma so we can apply this style to the

<th> tags as well as the <td> tags.

At this point, our table is really shaping up:

Now let’s style the last row of the table.

Bolding the Last Row with :last-child

The invoice is looking pretty good right now, but one of the managers would

like the bottom row of the table to be bolder than the other rows so it stands

out more. We can use last-child for that too, which grabs the last child in a

group.

Applying a bottom margin to paragraphs so that they are evenly spaced on a

page is a common practice among web developers. This can sometimes lead

to an extra bottom margin at the end of a group, and that might be

undesirable. For example, if the paragraphs are sitting inside of a sidebar or

callout box, we may want to remove the bottom margin from the last paragraph

so that there’s not wasted space between the bottom of the last paragraph

and the box’s border. The last-child selector is the perfect tool for this. We can

use it to remove the margin from the last paragraph.

p{ margin-bottom:20px}

#sidebarp:last-child{margin-bottom: 0; }

Let’s use this same technique to bold the contents of the last row.

report erratum • discuss

Styling Tables with Pseudoclasses • 73

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