HTML and CSS Reference
In-Depth Information
A Serious Exercise
Why don't you try your hand using the nth-child pseudo-class?
Complete the CSS rule below using the nth-child pseudo-class
to color the odd rows light orange.
W
rite your p
seudo-class
se
lector here
.
tr:___________________ {
background-color: #fcba7a;
}
Co
mment out
your .cellco
lor class like
this:
/* .cellcolor {
background-color: #fcba7a;
} */
If you want to try this for real, first comment out your .cellcolor
class so it doesn't take effect anymore. Next, place the new
tr pseudo-class rule
above
the rule for setting the background
color of the <th> row (so the <th> row stays dark orange). Make
sure you're using a modern browser (IE9+!), and reload the
page. Did it work? Go ahead and remove this new rule, and
uncomment the .cellcolor rule before moving on.
R
ows 1, 3, 5,
and 7 all ha
ve a light-
orange back
ground
co
lor. But th
e rule for t
h will overr
ide the rule
for
th
e “odd” ro
ws, so it wil
l stay dark
orange.
Tess
Did we mention that
Tony made
an interesting discovery
in Truth
or Consequences, New Mexico?
It's fair to say Tony found something interesting
about Truth or Consequences, New Mexico; in
fact, he found
her
so interesting that after going to
Arizona, he turned around and came right back.
We're glad for Tony, but he's really given us a
conundrum with the table. While we could just add
a new row for Truth or Consequences, we'd really
like to do it in a more elegant way. What are we
talking about? Look on the next page to find out.
