CSS Menus

CSS Pseudo-classes and pseudo-elements

In CSS1, style is normally attached to an element based on its position in the document structure. This simple model is sufficient for a wide variety of styles, but doesn't cover some common effects. The concept of pseudo-classes and pseudo-elements extend addressing in CSS1 to allow external information to influence the formatting process.

Pseudo-classes and pseudo-elements can be used in CSS selectors, but do not exist in the HTML source. Rather, they are "inserted" by the UA under certain conditions to be used for addressing in style sheets. They are referred to as "classes" and "elements" since this is a convenient way of describing their behavior. More specifically, their behavior is defined by a fictional tag sequence.

Pseudo-elements are used to address sub-parts of elements, while pseudo-classes allow style sheets to differentiate between different element types.

2.1    Anchor pseudo-classes

User agents commonly display newly visited anchors differently from older ones. In CSS1, this is handled through pseudo-classes on the 'A' element:

A:link { color: red }       /* unvisited link */
A:visited { color: blue }   /* visited links */
A:active { color: lime }    /* active links */

All 'A' elements with an 'HREF' attribute will be put into one and only one of these groups (i.e. target anchors are not affected). UAs may choose to move an element from 'visited' to 'link' after a certain time. An 'active' link is one that is currently being selected (e.g. by a mouse button press) by the reader.

The formatting of an anchor pseudo-class is as if the class had been inserted manually. A UA is not required to reformat a currently displayed document due to anchor pseudo-class transitions. E.g., a style sheet can legally specify that the 'font-size' of an 'active' link should be larger than a 'visited' link, but the UA is not required to dynamically reformat the document when the reader selects the 'visited' link.

Pseudo-class selectors do not match normal classes, and vice versa. The style rule in the example below will therefore not have any influence:

A:link { color: red }

<A CLASS=link NAME=target5> ... </A>

In CSS1, anchor pseudo-classes have no effect on elements other than 'A'. Therefore, the element type can be omitted from the selector:

A:link { color: red }
:link { color: red }

The two selectors above will select the same elements in CSS1.

Pseudo-class names are case-insensitive.

Pseudo-classes can be used in contextual selectors:

A:link IMG { border: solid blue }

Also, pseudo-classes can be combined with normal classes:

A.external:visited { color: blue }

<A CLASS=external HREF="http://out.side/">external link</A>

If the link in the above example has been visited, it will be rendered in blue. Note that normal class names precede pseudo-classes in the selector.

2.2    Typographical pseudo-elements

Some common typographical effects are associated not with structural elements but rather with typographical items as formatted on the canvas. In CSS1, two such typographical items can be addressed through pseudo-elements: the first line of an element, and the first letter.

CSS1 core: UAs may ignore all rules with ':first-line' or ':first-letter' in the selector, or, alternatively, only support a subset of the properties on these pseudo-elements.  

2.3    The 'first-line' pseudo-element

The 'first-line' pseudo-element is used to apply special styles to the first line as formatted on the canvas:

<STYLE TYPE="text/css">
  P:first-line { font-variant: small-caps }
</STYLE>

<P>The first line of an article in Newsweek.

On a text-based UA, this could be formatted as:

THE FIRST LINE OF AN
article in Newsweek.

The fictional tag sequence in the above example is:

<P>
<P:first-line>
The first line of an 
</P:first-line>
article in Newsweek.
</P>

The 'first-line' end tag is inserted at the end of the first line as formatted on the canvas.

The 'first-line' pseudo-element can only be attached to a block-level element.

The 'first-line' pseudo-element is similar to an inline element, but with certain restrictions. Only the following properties apply to a 'first-line' element: font properties, color and background properties , 'word-spacing' , 'letter-spacing' , 'text-decoration' , 'vertical-align' , 'text-transform', 'line-height' , 'clear' .

2.4    The 'first-letter' pseudo-element

The 'first-letter' pseudo-element is used for "initial caps" and "drop caps", which are common typographical effects. It is similar to an inline element if its 'float' property is 'none', otherwise it is similar to a floating element. These are the properties that apply to 'first-letter' pseudo-elements: font properties , color and background properties , 'text-decoration' , 'vertical-align' (only if 'float' is 'none', ), 'text-transform' , 'line-height' , margin properties , padding properties, border properties , 'float' , 'clear' .

This is how you could make a dropcap initial letter span two lines:

<HTML>
 <HEAD>
  <TITLE>Title</TITLE>
  <STYLE TYPE="text/css">
   P              { font-size: 12pt; line-height: 12pt }
   P:first-letter { font-size: 200%; float: left }
   SPAN           { text-transform: uppercase }
  </STYLE>
 </HEAD>
 <BODY>
  <P><SPAN>The first</SPAN> few words of an article in The Economist.</P>
 </BODY>
</HTML>

If a text-based UA supports the 'first-letter' pseudo-element (they probably will not), the above could be formatted as:

___
 | HE FIRST few
 | words of an 
article in the
Economist.

The fictional tag sequence is:

<P>
<SPAN>
<P:first-letter>
T
</P:first-letter>he first
</SPAN> 
few words of an article in the Economist.
</P>

Note that the 'first-letter' pseudo-element tags abut the content (i.e. the initial character), while the 'first-line' pseudo-element start tag is inserted right after the start tag of the element it is attached to.

The UA defines what characters are inside the 'first-letter' element. Normally, quotes that precede the first letter should be included:

||   /\    bird in 
    /  \   the hand
   /----\  is worth
  /      \ two in
the bush," says an 
old proverb.

When the paragraph starts with other punctuation (e.g. parenthesis and ellipsis points) or other characters that are normally not considered letters (e.g. digits and mathematical symbols), 'first-letter' pseudo-elements are usually ignored.

Some languages may have specific rules about how to treat certain letter combinations. In Dutch, for example, if the letter combination "ij" appears at the beginning of a word, they should both be considered within the 'first-letter' pseudo-element.

The 'first-letter' pseudo-element can only be attached to a block-level element.

2.5    Pseudo-elements in selectors

In a contextual selector, pseudo-elements are only allowed at the end of the selector:

BODY P:first-letter { color: purple }

Pseudo-elements can be combined with classes in selectors:

P.initial:first-letter { color: red }

<P CLASS=initial>First paragraph</A>

The above example would make the first letter of all 'P' elements with 'CLASS=initial' red. When combined with classes or pseudo-classes, pseudo-elements must be specified at the end of the selector. Only one pseudo-element can be specified per selector.

2.6    Multiple pseudo-elements

Several pseudo elements can be combined:

P { color: red; font-size: 12pt }
P:first-letter { color: green; font-size: 200% }
P:first-line { color: blue }

<P>Some text that ends up on two lines</P>

In this example, the first letter of each 'P' element would be green with a font size of 24pt. The rest of the first line (as formatted on the canvas) would be blue while the rest of the paragraph would be red. Assuming that a line break will occur before the word "ends", the fictional tag sequence is:

<P>
<P:first-line>
<P:first-letter> 
S 
</P:first-letter>ome text that 
</P:first-line> 
ends up on two lines 
</P>

Note that the 'first-letter' element is inside the 'first-line' element. Properties set on 'first-line' will be inherited by 'first-letter', but are overridden if the same property is set on 'first-letter'.

If a pseudo-element breaks up a real element the necessary extra tags must be regenerated in the fictional tag sequence. For example, if a SPAN element spans over a </P:first-line> tag, a set of SPAN end and start tags must be regenerated and the fictional tag sequence becomes:

<P>
<P:first-line>
<SPAN> 
This text is inside a long 
</SPAN>
</P:first-line>
<SPAN> 
span element 
</SPAN>