Advanced Pseudo-Classes

In addition to the two anchor pseudo-classes that were previously described, CSS2.1 has four more pseudo-classes. Three of them allow dynamic effects: The style changes when the user does something. The fourth pseudo-class selects elements that are the first children of their parent.

User-Interaction: The Active, Hover, and Focus Pseudo-Classes

CSS2.1 can describe a few dynamic effects. They typically give the users of a document extra visual feedback on the purpose of various elements. For example, you can change the color of an A element when the mouse moves over it, or you can change the shape of the mouse pointer itself to give an extra visual clue that the A element is active and that something more would happen if the user actually clicked instead of just moved the mouse.

Because they are dynamic, these dynamic effects attract the user's attention more than static displays of colors and text. But, they can be easily overdone, and many people don't like it when their attention is constantly drawn to new areas when all they do is slightly move the mouse. So, be careful with these features.

The three pseudo-classes that select elements based on the user's interaction with them represent three common states for elements in an interactive document. They can be applied to the source anchors of hyperlinks, to elements in forms, and in documents with scripts often to other elements. (But, in that last case, extra care is called for because users don't expect elements outside a form to be active.) The three states are the following:

• hover The mouse or some other pointing device "hovers" over the element. The user hasn't clicked or otherwise activated the element, but is in a position that he or she could click. For example, to change the background of a hyperlink when the mouse enters the element's box, you might use this rule:

   A:link:hover, A:visited:hover {   background: yellow } 

  
  

• active The element has been activated, and some action is being performed, but is not yet complete. The typical application is again for hyperlinks, to indicate that the user's request to fetch a new page has been accepted, but that the page hasn't arrived yet:

   A:active { color: white; background: black } 

  
  

• focus When elements accept keyboard input, such as the INPUT and TEXTAREA elements of HTML, at most, one of them can accept input at any time. The user has to explicitly select the element he or she wants to send characters to. Depending on the browser, that is done by clicking or using the Tab key. The element that currently has the input focus is often indicated with a border-like outline. The CSS rule for that might be as follows:

   :focus { ouline: solid medium black } 

  
  

The browser may only support a limited number of properties for these pseudo-classes. For example, you should not expect all browsers to be able to change the font size of the active pseudo-class because this would mean the browser has to reformat the entire document when you click a link. It's safe to assume that you can change colors and add/remove underlining because these are purely local changes. But, any rule that may change the size of something (for example, font or margin) may be ignored by the browser.

Counting Elements: The First-Child Pseudo-Class

The contextual rule for siblings previously described (in "The sibling selector") selects elements that have a certain preceding element. The opposite, selecting an element because it has no preceding element, is provided by the first-child pseudo-class. For example:

 DIV.bio > P:first-child { font-weight: bold } 

This selects P elements that are children of bio elements, but only if they are the first child. Combining child selectors, sibling selectors, and the first-child pseudo-class leads to very precise selectors. They can sometimes even take the place of an ID selector (refer to "The ID attribute"), if there is no possibility of adding an ID attribute to the document.

This example picks out the third list item of every UL list:

 UL > LI:first-child + LI + LI {   font-style: italic } 

When it's applied to this HTML fragment:

 <UL>   <LI>horses   <LI>dogs   <LI>cows     <UL>       <LI>Greta IV       <LI>Berta II       <LI>Berta III     </UL> </UL> 

it causes "cows" and "Berta III" to be italic (see Figure 4.15).

Figure 4.15. Using contextual selectors to put the third item of every UL list in italic.