CSS3: From Knowledgable to Ninja – Part 1 Selectors, UI Selectors

UI pseudo-classes

:enabled and :disabled
These pseudo-classes can be great for form usability, enabling and disabling form elements based on what the visitor has already filled out.

:checked
Target the element when it has been checked i.e. radio button and checkboxes.

 
input[type=checkbox]:checked + label {color:red;}
  <input type="checkbox" id="test1ck">
  <label for="test1ck">Check and Uncheck Me</label>

Form related UI pseudo-classes

All of the following pseudo-classes should be self explanatory :)

:valid and :invalid
:required and :optional
:in-range and :out-of-range
:read-only and :read-write
:default

<div>
  <input type="number" min="5" max="7" id="test3ck" required="required">
  <label for="test3ck">Number between 5 and 7</label>

  <input type="color" pattern="#[a-fA-F0-9]{6}" id="test4ck">
  <label for="test4ck">Hexidecimal color</label>
</div>​

View the demo (currently best viewed in Chrome)