CSS Introduction | CSS Selectors | Element State Pseudo-classes

Element state pseudo-classes let you set separate styles according to the state of form controls.

The element state pseudo-classes available in CSS are as follows.

Pseudo-class	Description
`:checked`	Selects all checked input elements.
`:enabled`	Selects all enabled input elements.
`:disabled`	Selects all disabled input elements.

`:checked`

:checked selects input elements that are in the checked state.

<style>
    input { color: #FFEFD5; }
    input:checked + span { color: #CD853F; }
</style>

:enabled selects input elements that can be used. :disabled selects input elements that cannot be used.

<style>
    input { color: #FFEFD5; }
    input:disabled + span { color: #CD853F; }
</style>