HTML and CSS Reference
In-Depth Information
Putting those pseudo-classes to work
Okay, let's be honest. You've probably just learned the most important thing in this
book: pseudo-classes. Why? No, no, not because they allow you to style elements
based on various “classes” your browser decides they belong to, like
:link
or
:first-child
. And, no, not because they give you really powerful ways to style
elements based on things that happen while your visitors are using your page, like
:hover
. It's because the next time you're in that design meeting and you start talking
about pseudo-classes with a real understanding, you're going to move to the
head of the
class
. We're talking promotions and bonuses…at a minimum, the awe and respect of
your fellow web buddies.
So, let's put those pseudo-classes to good use. You've already added some pseudo-class
rules to your “lounge.css” and they had a dramatic impact on the look of the links, but
they're probably not quite right for the lounge. So let's rework the style a little:
Okay
, big
cha
nge
here
. We'
re u
sing
a de
scend
ant
sele
ctor
comb
ined
wit
h a
pseud
o-c
lass.
The
fir
st se
lecto
r sa
ys
to se
lect
any
unvi
sited
<a
> ele
ment
th
at is
nest
ed i
n an
elem
ent
with
the
id “
elixi
rs”.
So w
e're
styl
ing J
UST
th
e
links
insi
de e
lixirs
.
O
n these two, we're setting the color.
F
or unvisited links, a nice aquamarine…
#elixirs a:link {
color: #007e7e;
}
…and for vis
ited links we're
using a dar
k gray.
#elixirs a:visited {
color: #333333;
}
#elixirs a:hover {
background: #f88396;
color: #0d5353;
}
Open up your “lounge.css” and rework your a:link, a:visited, and a:hover
rules to use the new descendant selector and the new style definitions.
Save, reload, and turn the page.
