Getting Tabular - Head First HTML and CSS - page 629

Overriding the CSS for the nested
table headings

You can target just the <th> elements in the nested table using
a descendant selector. Add a new rule to your CSS that uses
the “table table th” selector to change the background color of
the nested table headers to white:

Q: I used a class to solve the Brain
Barbell. I created a class called “nestedtable”
and assigned each table heading to it. Then
I created a rule like this:

table table th {
background-color: white;
}

.nestedtable {
background-color: white;
}

Now save the changes to your “journal.css” file and reload.

Is that an okay solution too?
A: There are lots of different ways to solve
problems using CSS, and certainly your
solution is an effective and perfectly valid way
to use CSS. We'll just point out that by using
the descendant selector instead, we didn't have
to make any changes to our HTML. What if
Tony and Tess keep adding reviews for diners?
Then for every review, you'd have to make
sure and add the class to each <th>. With our
solution, the styling happens automatically.

You want Tony and Tess to
have different background
colors on their table rows;
say, blue and pink. Can
you think of several ways
to do that?

But no tice it still h as the bold
font w eight s ince w e didn' t
overrid e that prope rty.