Section 11.35. Putting those pseudo-classes to work

11.35. 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 it allows 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 change here. We're using a descendant selector combined with a pseudo-class. The first selector says to select any unvisited <a> element that is nested in an element with the id "elixirs". So we're JUST styling the links inside elixirs.#elixirs a:link {On these two we're setting the color. For unvisited links, a nice aquamarine... color: #007e7e; } #elixirs a:visited {...and for visited links we're using a dark gray. color: #333333; } #elixirs a:hover {Now for the really interesting rule. When the user is hovering over the link, we're changing the background to red. This makes the link look highlighted when you pass the mouse over it. Give it try! background: #f88396; color: #0d5353; } Exercise 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.