HTML and CSS Reference
In-Depth Information
Figure 1-39. Styling checked and indeterminate UI elements
:checked {background: silver;}
:indeterminate {border: red;}
Although checkable elements are unchecked by default, it's possible for a HTML author
to toggle them on by adding the
checked
attribute to an element's markup. An author
can also use DOM scripting to flip an element's checked state to checked or unchecked,
whichever they prefer.
As we've seen, there is a third state, “indeterminate.” As of mid-2012, this state can
only be set through DOM scripting; there is no markup-level method to set elements
to an indeterminate state. The purpose of allowing an indeterminate state is to visually
indicate that the element needs to be checked (or unchecked) by the user. However,
note that this is purely a visual effect: it does not affect the underlying state of the UI
element, which is either checked or unchecked, depending on document markup and
the effects of any DOM scripting.
Although
Figure 1-39
does show styled radio buttons, at the time of
production (summer 2012) this was only possible in one browser: Op-
era. All other browsers ignored the styles. This is due to the difficulty of
styling form elements in general and historical uncertainty over the best
way to proceed. This may change in the near future, but treat form styl-
ing with extreme caution.
The :target Pseudo-Class
When a URL includes a fragment identifier, the piece of the document at which it points
is called (in CSS) the
target
. Thus you can uniquely style any element that is the target
of a URL fragment identifier with the
:target
pseudo-class.
Even if you're unfamiliar with the term “fragment identifier,” you've almost certainly
seen them in action. Consider this URL:
http://www.w3.org/TR/css3-selectors/#target-pseudo
The
target-pseudo
portion of the URL is the fragment identifier, which is marked by
the
#
symbol. If the referenced page (
http://www.w3.org/TR/css3-selectors/
) has an
element with an ID of
target-pseudo
, or (in HTML) an
a
element with a
name
attribute
whose value is
target-pseudo
, then that element becomes the target of the fragment
identifier.
Thanks to
:target
, you can highlight any targeted element within a document, or you
can devise different styles for various types of elements that might be targeted—say,
one style for targeted headings, another for targeted tables, and so on.
Figure 1-40
shows an example of
:target
in action:
