HTML and CSS Reference
The visited pseudo-class defines the look and feel of the anchor once it has been clicked at least
once. The hover class refers to the mouse hovering on the anchor. Finally, the active class refers to the
look and feel of the anchor when it holds the input focus. The previous example manages to render
the anchor always in the same way, and gives it a different color scheme when the mouse is over it.
Pseudo-classes for input elements
Sometimes you just want a different style for input fields (that is, text boxes) that are disabled,
checked, or focused. CSS makes it fairly easy to do this through a bunch of ad hoc pseudo-classes.
You can use the checked class to select all check boxes or radio buttons that are currently checked.
Likewise, you can use disabled and enabled classes to query for related elements. The focus class,
instead, signals which element is currently holding the input focus.
The following example automatically switches the background color of an INPUT text field to
reflect the focused state:
The previous code snippet contains an interesting construct that you have not met before: an
expression in square brackets. That's an attribute pseudo-class.
An attribute pseudo-class applies to an existing CSS selector and restricts the output to only elements
that contain a given attribute with a given value. Let's look at the previous CSS snippet more closely.
The [type=text] selector applies to INPUT elements and it restricts the list of INPUT elements
to only those where a type attribute exists and has a value of text . Table 3-1 lists the most popular
TABLE 3-1 Popular attribute selectors
Elements that contain an attribute with the specified name.
Elements that contain an attribute with the specified name and value.
[attribute = value]
Elements that contain an attribute with the specified name whose value contains
the specified value.
[attribute *= value]