Pseudo-Classes and Pseudo-Elements

Sometimes you need to select parts of a Web page that don't have tags per se, but are nonetheless easy to identify, like the first line of a paragraph, or a link as you move your mouse over it. CSS gives you a handful of selectors for these doohickeys—pseudo-classes and pseudo-elements.

Styles for Links

Four pseudo-classes let you format links in four different states based on how a visitor has interacted with that link. They identify when a link's in one of the following four states:

  • a:link selects any link that your guest hasn't visited yet, while the mouse isn't hovering over or clicking it. This style is your regular, unused Web link.

  • a:visited is a link that your visitor has clicked before, according to the Web browser's history. You can style this type of link differently than a regular link to tell your visitor, "Hey, you've been there already!"

  • a:hover lets you change the look of a link as your visitor passes the mouse over it. The rollover effects you can create aren't just for fun—they can provide useful visual feedback for buttons on a navigation bar.

    You can also use the :hover pseudo-class on elements other than links. For example, you can use it to highlight text in a <p> or <div> when your guests mouse over it.

    Note

    In Internet Explorer 6 and earlier, :hover works only on links. For a JavaScript workaround, see the box in Section 3.6.2.4.

  • a:active lets you determine how a link looks as your visitor clicks. In other words, it covers ...

Get CSS: The Missing Manual now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.