HTML and CSS Reference
In-Depth Information
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:
input[type=text]:focus {
background-color: orange;
color: black;
}
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.
Attribute pseudo-classes
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.
input[type=text]:focus {
background-color: orange;
color: black;
}
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
attribute selectors.
TABLE 3-1
Popular attribute selectors
Selector
Description
Elements that contain an attribute with the specified name.
[attribute]
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]
Search WWH ::
Custom Search