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.

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

  <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)