Using Advanced Selectors - Beginning CSS3 - page 302

submitted, something that until recently was possible only with JavaScript. In line with these changes, CSS3 has
introduced a large number of pseudo-classes that allow you to style form elements based on their state.
Because of the modularization of CSS3, only three of the new pseudo-classes were included in the CSS3
Selectors module, which was formally approved in September 2011. A further 10 have been added in the
draft CSS3 UI module. The only significance of the pseudo-classes being in different modules is the speed of
implementation.
Table 13-4 lists all 13 pseudo-classes. The first three made it into the CSS3 Selectors module, and are fully
supported by all modern browsers, including IE 9. The others appear to have been an afterthought, and are being
gradually implemented.

Table 13-4. Pseudo-classes that Select Form Elements Based on Their State

Pseudo-class Description

:enabled Matches a form element that is not disabled.

:disabled

Matches a form element that is disabled.

:checked Matches a form element that has been checked or selected.

:indeterminate Matches a form element that is in an indeterminate state. See the following text for an

explanation of what this means.

:default Matches the default option(s) among a group of similar elements.

:valid Matches elements that have a valid data value.

:invalid Matches elements that have an invalid data value.

:in-range Matches elements with a data value that's within the prescribed range.

:out-of-range

Matches elements with a data value outside the prescribed range.

:required Matches required form elements.

:optional Matches form elements that are not required.

:read-only Matches elements whose contents cannot be altered by the user.

:read-write Matches elements, such as text input fields, whose contents can be altered by the user.

■ A good place to check which browsers support the pseudo-classes in Table 13-4 (or any other Css feature)
is the Mozilla developer network's Css Reference at https://developer.mozilla.org/en/CSS Reference .

Tip

Most of the pseudo-classes listed in Table 13-4 are self-explanatory. However, :indeterminate needs some
explanation.
HTML5 introduces a new indeterminate DOM property for check boxes. By default, it's false . The only way
to turn it on is through JavaScript like this, for example:

<script>
document.getElementById('checkbox1').indeterminate = true;
</script>