Selectors - Selectors, Specificity, and the Cascade - page 48

Although the state of a UI element can certainly be changed by user action—e.g., a user
checking or unchecking a checkbox—UI state pseudo-classes are not classified as
purely dynamic because they can also be affected by the document structure or DOM
scripting.
You might think that :focus belongs in this section, not the previous
section. However, the Selectors Level 3 specification groups :focus in
with :hover and :active . This is most likely because they were grouped
together in CSS2, which had no UI state pseudo-classes. More impor-
tantly, though, focus can be given to non-UI elements, such as headings
or paragraphs—one example is when they are read by a speaking
browser. That alone keeps it from being considered a UI-state pseudo-
class.
Enabled and disabled UI elements
Thanks to both DOM scripting and HTML5, it is possible to mark a user interface
element (or group of user interface elements) as being disabled. A disabled element is
displayed, but cannot be selected, activated, or otherwise interacted with by the user.
Authors can set an element to be disabled either through DOM scripting, or (in
HTML5) by adding a disabled attribute to the element's markup.
Any element that hasn't been disabled is by definition enabled, and you can style these
two states using :enabled and :disabled . It's much more common to simply style dis-
abled elements and leave enabled elements alone, but both have their uses, as illustrated
in Figure 1-38 .
:enabled {font-weight: bold;}
:disabled {opacity: 0.5;}
Figure 1-38. Styling enabled and disabled UI elements
Check states
In addition to being enabled or disabled, certain UI elements can be checked or un-
checked—in HTML, the input types “checkbox” and “radio” fit this definition. Selec-
tors level 3 offers a :checked pseudo-class to handle elements in that state, though
curiously it omits an :unchecked . There is also the :indeterminate pseudo-class, which
matches any checkable UI element that is neither checked nor unchecked. These states
are illustrated in Figure 1-39 .