The Language Pseudo-class and UI Element States pseudo-classes in CSS

The Language category of pseudo-class includes one class only that is, :lang. The :lang pseudo-class is used to specify a language to be used in a specific element. It is used in an HTML document that uses different languages.

For example:

The :lang pseudo-class uses the angular brackets (<and>)for quoting purpose in the French language While in the English language, it uses quotes ('and').

The UI element states pseudo-classes enable you to specify the appearance of UI elements such as buttons and check boxes. Using these classes you can add a particular style to an enabled or disabled button or a checked or unchecked check box.

UI element states pseudo-classes is:

:enabled :-Represents an element of UI that is in the enabled state for instance a menu option. Note that such elements also have a corresponding disabled state.

:disabled :-Represents an element of UI that is in the disabled state for instance a menu option. Note that such elements also have a corresponding enabled state.

:checked :-Represents the selected states of radio and checkbox elements.

:indeterminate :-Represents the undetermined states of radio and checkbox elements.


For example:

input[type="text"]:enabled {background:red;}
input[type="text"]:disabled {background:blue;}
input:checked{border:1px solid pink;}

Here The background color of an enabled text box is set as red and of a disabled text box is set as blue. and a checkbox is displayed in pink border if it is in the selected state.