<h1>
    Pseudo Classes
</h1>
<p>
    CSS pseudo-classes are keywords added to selectors that specify
    a special state of the element to be selected. For example,
    <code>:hover</code> will apply a style when the user hovers
    over the element specified by the selector.
</p>
<p>
    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 (<code>:focus</code>) or is in an invalid
    state (<code>:invalid</code>).
<p>
    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 C1 MVC input controls contain input elements;
    when the input elements have the focus, the inner input element gets
    the <code>:focus</code> pseudo-class, but the host element that contains
    the control does not.
</p>
<p>
    For this reason, C1 MVC adds some pseudo-classes of its own to make
    building effective forms easier:
</p>
<ul>
    <li>
        <b>wj-state-focused</b>: Added to control host elements when
        the control <b>contains</b> the active element (not necessarily
        when the host element <b>is</b> the active element).
    </li>
    <li>
        <b>wj-state-invalid</b>: Added to control host elements when
        the control contains input elements in an invalid state.
    </li>
    <li>
        <b>wj-state-empty</b>: Added to control host elements when the
        control contains an input element with no content (this is different
        from the <code>:empty</code> pseudo-class which is applied to
        elements that have no children.
    </li>
    <li>
        <b>wj-state-readonly</b>: Added to control host elements when
        the control's <b>isReadOnly</b> property is set to true.
    </li>
    <li>
        <b>wj-state-disabled</b>: Added to control host elements when the
        control's <b>isDisabled</b> property is set to true (which
        corresponds to adding a "disabled" attribute to the control's
        host element).
    </li>
</ul>