Learning PHP, MySQL, JavaScript, and CSS, 2nd Edition

Pseudoclasses

There are a number of selectors and classes that are used only within a style sheet and that do not have any matching tags or attributes within HTML. Their task is to classify elements using characteristics other than their names, attributes, or content—i.e., characteristics that cannot be deduced from the document tree. These include pseudoclasses such as first-line, first-child, and first-letter.

Pseudoclasses are separated from elements using a : (colon) character. For example, to create a class called bigfirst for emphasizing the first letter of an element, you would use a rule such as the following:

.bigfirst:first-letter {
    font-size:400%;
    float    :left; }

When the bigfirst class is applied to a text element the first letter will be displayed much enlarged, with the remaining text shown at normal size neatly flowing around it (due to the float property), as if the first letter were an image or other object. Other pseudoclasses include hover, link, active, and visited. All of these are mostly useful for applying to anchor elements, as in the following rules, which set the default color of all links to blue, and that of links that have already been visited to light blue:

a:link    { color:blue;      }
a:visited { color:lightblue; }

The following pair of rules is interesting in that they use the hover pseudoclass so that they are applied only when the mouse pointer is placed over the element. In this example, they change the link to white text on a red background, providing a dynamic ...