Pseudo-classes and Pseudo-elements

Finally, let's look at a group of selectors that is not based on any particular element but on specific conditions within the document: pseudo-classes. Designated by a colon preceding the name, pseudo-classes are independent of particular elements and instead look at what's happening within the document. The most common (and most widely implemented, though not available in Netscape 4.x) is the :hover pseudo-class, which applies when the user rolls the mouse over an element, as shown in the code in Listing 9 and in Figure 7.

    

...
   <style type="text/css">

      * { font-family: Verdana }
      td { font-size: 10pt }
      .category { font-weight: bold; }
      td.category { font-style: italic }
      #bestinshow { color: red }
      p a { text-decoration: none }
      h4 + h4 { font-style: italic }
      :hover { background-color: red }
   </style>
...

Figure 7. Using the :hover pseudo-class

Other, less-widely supported pseudo-classes include :first-child, :link, :visited, :active, and :focus and :lang. Note that a pseudo-class can be applied to a specific element type, like this:

p:first-child { font-size: larger }

Pseudo-elements are similar to pseudo-classes (and share syntax with them) but define content within the document. Pseudo-elements defined by the CSS2 Recommendation include:

• :first-line, which selects the first line of content, even if that changes based on the size of the window
• :first-letter, which can be used for effects such as drop caps
• :before and :after, which are combined with another selector and are usually used to insert content into the document, like this:
• *.category:before { content: "Category: " }