css3_advanced_selectors/stylesheets/style.css
tr:last-child{
font-weight:bolder;
}Let’s do the same thing with the last column of the table. This will help the
line totals stand out, too.css3_advanced_selectors/stylesheets/style.css
td:last-child{
font-weight:bolder;
}Finally, we’ll make the total’s font size bigger by using last-child with descendant
selectors. We’ll find the last column of the last row and style it with this:css3_advanced_selectors/stylesheets/style.css
tr:last-childtd:last-child{
font-size:24px;
}We’re almost done, but there are a few things left to do with the last three
rows of the table.Counting Backward with :nth-last-child
We’d like to highlight the shipping row of the table when there’s a discounted
shipping rate. We’ll use nth-last-child to quickly locate that row. You saw how
you can use nth-child and the formula an+b to select specific child elements in
Aligning Column Text with :nth-child, on page 72. The nth-last-child selector works
exactly the same way, except that it counts backward through the children,
starting at the last child first. This makes it easy to grab the second-to-last
element in a group. It turns out we need to do just that with our invoice table.So, to find our shipping row, we’d use this code:
css3_advanced_selectors/stylesheets/style.css
tr:nth-last-child(2){
color:green;
}Chapter 4. Styling Content and Interfaces • 74
Download from Wow! eBook <www.wowebook.com> report erratum • discuss