DAN STORM

• previous
• next

Pseudo-elements

An element consists of the opening and closing tags and all the content in between.

So far all the styling we have seen pertains to elements in their entirety. If you want only part of an element to be styled a certain way you can use, say, a SPAN or EM element within it to apply that separate style. But there is a way in CSS to apply a style to part of an element without having to add another element within it. You may even want to style an element (or part of an element) when it is in a certain state, such as clicked, visited, or on mouseover. These "sub-elements", if you will, of your HTML, and the differing states of an element, are not discernible in the document tree.

The pseudo-element selector does not match any real HTML element in the document tree, but affects only a part of a selector. There are two types of pseudo-elements: those that are stateless, and those that are state-changing. While this is not a complete definition, it will suffice for CSS1 pseudo-elements. We will not consider other types of pseudo-elements until later, because they are part of the CSS2.1 specification.

first-letter

The first-letter pseudo-element affects, as you would think, only the first letter of an element, and is typically used for drop caps.

first-line

The first-line pseudo-element is often used in tandem with first-letter to style the topmost line of text in a P element before it wraps to the second line. Generally developers will style first-line text in small caps.

Pseudo-elements are declared at the end of a selector because it is that portion of the element that you wish to style. (Pseudo-classes can be placed wherever appropriate in a selector, even more than once.

Note that the W3C is now recommending two colons for pseudo-elements to better distinguish them from pseudo-classes (below), though a single colon is still legal for CSS1 and CSS2.1 pseudo-elements. CSS3 pseudo-elements, which we will discuss below, require the double colon, so using two colons now may be a good habit to get into for forwards compatibility. (If you validate your CSS at the W3C site, you have to specifically select CSS3 or the double colon will yield an error.) Test thoroughly when using the double colon since I have found that IE7 can choke on it.

Pseudo-classes

If you wish to affect an entire element, but only in a particular state—such as the hover state—you use a pseudo-class. Just as pseudo-elements cannot always be deduced from the document tree, pseudo-classes often cannot be so deduced. They come in two forms: state-changing and stateless. Only the former type exists in CSS1, and so we will hold off on introducing the second type until later. The most common pseudo-classes are link, hover, visited, and active. In CSS1 they apply only to anchor tags. In CSS 2.1 any element can have a hover state. You may have guessed already, but IE6 does not support hover for elements other than anchors, while compliant browsers do.

link

The link pseudo-class refers to the unvisited state of a link.

visited

The visited pseudo-class applies once the link has been visited by the user. User Agents (UAs) will generally return a visited link to the unvisited link state after a specified time, for example, 10 days. The link and visited pseudo-classes are mutually exclusive.

hover

The hover pseudo-class state is the mouseover state.

active

The active pseudo-class state refers to the onclick state. As opposed to link and visited, the hover and active pseudo-classes are not mutually exclusive in CSS2 and later, though they are in CSS1. These two pseudo-classes are called dynamic pseudo-classes.

In your CSS file these four pseudo-classes should be specified in a certain order for cross-browser compatibility. A good mnemonic device to help you retain this order is LoVeHAte: link, visited, hover, active. The W3C says "...A:hover must be placed after the A:link and A:visited rules, since otherwise the cascading rules will hide the 'color' property of the A:hover rule. Similarly, because A:active is placed after A:hover, the active color (lime) will apply when the user both activates and hovers over the A element."

Pseudo-classes, unlike pseudo-elements, need not be at the end of a selector because a pseudo-class, like a class, affects an entire selector, and thus it can have descendant selectors that may or may not themselves have pseudo-classes. The following are both legal declarations.

• previous
• next