Pseudo Classes

CSS pseudo classes are keywords added to selectors that specify a special state of the element to be selected. For example, ":hover" applies 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).
• wj-clear-input: Added to control host elements to add a "Clear" button to the input elements in Wijmo input controls. The "Clear" button allows users to clear the control using the mouse, which may be more convenient than pressing the Ctrl+A/Delete keys.

For detailed implementation, see LearnWijmo sample which depicts the use of pseudo classes.