Pseudo selectors - CSS Quick Syntax Reference Guide - page 21

checked
The :checked pseudo-class matches elements that are in a selected state. It can be used
only on check box, radio button, and <option> elements.
input[type="checkbox"]:checked {}
This rule matches any check boxes that are selected on the web page.
<form>
<input type="checkbox">
</form>
All major browsers support the :checked pseudo-class, except for IE8 and
earlier versions.
valid and invalid
The :valid and :invalid pseudo-classes are used to provide feedback to users when
they are filling out forms. Modern browsers can perform a basic field validation based on
the input type of a form element and, together with these pseudo-classes, the result can
be used to style the input element.
input:valid { background: green; }
input:invalid { background: red; }
Two fields are given here, one required and one optional. The first field remains
invalid until an e-mail is entered into the field. The second field is optional and is
therefore valid if left empty.
<form>
<input type="email" required>
<input type="email">
</form>
Note that these pseudo-classes are in no way a substitution for proper form
validation, using JavaScript or PHP, for example. Browser support for these two pseudo-
classes exists in Chrome 10+, Firefox 4+, IE10+, Safari 5,+ and Opera 10+.
required and optional
A form field with the required attribute set is matched by the :required pseudo-class.
The related :optional pseudo-class does the opposite: it matches input elements that do
not have the required attribute set.
input:required { color: red; }
input:optional { color: gray; }