HTML and CSS Reference
In-Depth Information
input[type="text"]
{ background-color: #ffff99; }
input
elements exist within interactive forms (see Chapter 2, “he HTML
Language”) and come in a variety of types, including checkboxes, radio but-
tons, and text ields. he preceding CSS statement provides a light yellow back-
ground color to input text ields like this:
<input type="text" size="32"/>
Pseudo-classes extend the capability of CSS statements to select HTML ele-
ments based on certain states or circumstances. Pseudo-elements allow for the
selection of speciic parts of a document element, such as its irst line of text.
he pseudo-class or pseudo-element name is appended to the rest of the selec-
tion expression, separated by a colon (:).
he most common use of pseudo-classes is to detect and style the various
states of links created by anchor elements. For example, the following four CSS
statements set the colors of hyperlinked text, depending on whether the link is
in its normal state, whether the mouse is hovering over the link, whether the
link is active (hover and hold down the mouse button), and whether the link is
in the visited state:
a:link
{ color: blue; }
a:hover
{ color: green; }
a:active
{ color: red; }
a:visited
{ color: purple; }
Because these four link states are mutually exclusive and represent all the pos-
sible states of a hypertext link, it is usually not necessary to specify the link
state. In other words, the irst statement just shown could be written as a
{ color: blue; }
with the same result. he
link
pseudo-class is included to
enable authors to overwrite previously set CSS rules for the same element.
Modern browsers permit all elements to have the hover state, not just links
created by the anchor element.
3
In theory, other elements can have link, active,
and visited states. But this is not deined in CSS, and browser manufacturers
might or might not implement such features.
3. Currently, Internet Explorer version 6 is the only browser with signiicant market share that recognizes
the hover state only with anchor elements.
