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.
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.
Search WWH ::

Custom Search