Pseudo-Classes

Pseudo-Classes

Named for the fact that they are classes that aren't actually attached to tags in the markup, pseudo-classes cause rules to be applied when certain events occur. The most common event that occurs is that the user points at or clicks on something. With the newer browsers (sadly, not Internet Explorer; at least not without adding a special JavaScript function), it's easy to make any onscreen object respond to a rollover; the act of moving the pointer over something, also known as hovering. For example, a pseudo-class can cause a border to appear around an image when the pointer rolls over it.

Anchor Link Pseudo-Classes

Pseudo-classes are most commonly used with hyperlinks (a tags), enabling things like a change in their color or causing their underlining to be removed when rolled over.

There are four pseudo-classes for anchor links, since links always are in one of these four states:

Link. The link is just sitting there looking like a link and waiting for someone to click on it.

Visited. The user has clicked on the link at some point in the past.

Hover. The link is currently being pointed at (rolled over).

Active. The link is currently being clicked.

Here are the corresponding pseudo-class selectors for these states (using the a selector with some sample declarations):

a:link {color:black;}
a:visited {color:gray;}
a:hover {text-decoration:none;}
a:active {color:navy;}

First, let's save the debate about appropriate link colors and behavior for later and simply observe that, according to the declarations above, links are initially black (and underlined by default). When the mouse rolls over them (the hover state), the underlining is removed, and they stay black, because no color is defined here for the hover state. When the user holds the mouse down on the link (the active state), it turns navy, and forever after (or more accurately, until the browser's History of the visit to the link's URL expires or is deleted by the user), the link displays in gray. When using these pseudo-class selectors, you have complete control over the look and behavior of the four states of links.

And that's all very nice, but the real power comes when you start using these anchor link pseudo-classes as part of contextual selectors. Then you can create different looks and behaviors for various groups of links in your designnavigation, footers, sidebars, and links in text, for example. We'll explore using these pseudo-classes for styling of links and other things to the point of tedium (or perhaps, ecstasy) later in the book, but for now, let's note the following and then move on:

You don't have to define all four of these states. If you just want to define a link and a hover state, that's fine. Sometimes it doesn't make sense to have links show as having been visited.

A browser may skip some of these rules if you don't state them in the order shown above: link, visited, hover, active. The mnemonic "LoVe-HA!" is an easy, if cynical, way to remember this.

You can use any selector with these pseudo-classes, not just a, to create all kinds of rollover effects. For example

p:hover {background-color: gray;}

This code will, well, I don't think I even need to tell someone as smart as you what is apt to happen to your paragraph at this point.

(As mentioned before, be aware that older browsers don't support rollovers on anything but anchor links and you need to help even current versions of Internet Explorer in this regard, as you will see later in this book).

Other Useful Pseudo-Classes

The purpose of pseudo-classes is to simulate classes being added to your markup when certain conditions occur. We have look at how they get applied in response to user actions such as pointing and clicking, but they can also be applied based on certain conditions being true in your markup.

:FIRST-CHILD

x:first-child        <-- a

(a)Where x is a tag name

This pseudo-class selects the first-child element with the name x. For example, if this rule

div.weather strong:first-child {color:red;}

is applied to this markup

<div class="weather">
It's <strong>very</strong> hot and <strong>incredibly</strong> humid.
</div>

then very is red and incredibly is not.

:FOCUS

x:focus        <-- a

(a)Where x is a tag name

An element such as a text field of a form is said to have focus when the user clicks it; that's where the characters appear when the user types. For instance, the code

input:focus {border: 1px solid blue;}

puts a blue border around such a field when the user clicks it.