Pseudo Classes

CSS pseudo-classes are keywords added to selectors that specifies a special state of the element to be selected. For example, :hover will apply a style when the user hovers over the element specified by the selector.

Pseudo-classes are important in forms because they let you apply styles to elements not only in relation to the content of the document tree, but also in relation to external factors like whether the element has the focus (:focus) or is in an invalid state (:invalid).

Some of the standard pseudo-classes are limited in their usefulness because they apply only to specific elements, and not to the elements ancestors. For example, many Wijmo input controls contain input elements; when the input elements have the focus, the inner input element gets the :focus pseudo-class, but the host element that contains the control does not.

For this reason, Wijmo adds some pseudo-classes of its own to make building effective forms easier:

• wj-state-focused: Added to control host elements when the control contains the active element (not necessarily when the host element is the active element).
• wj-state-invalid: Added to control host elements when the control contains input elements in an invalid state.
• wj-state-empty: Added to control host elements when the control contains an input element with no content (this is different from the :empty pseudo-class which is applied to elements that have no children.
• wj-state-readonly: Added to control host elements when the control's isReadOnly property is set to true.
• wj-state-disabled: Added to control host elements when the control's isDisabled property is set to true (which corresponds to adding a "disabled" attribute to the control's host element).

The fiddle below shows an example of how you can use the wj-state-focused pseudo-class to apply CSS animations to the thumb element of linear and radial gauges when they get the focus.