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

Custom Search