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:
The target-pseudo portion of the URL is the fragment identifier, which is marked by
the # symbol. If the referenced page ( ) 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
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:
Search WWH ::

Custom Search