User-interface pseudo-classes

Introduction

User interface pseudo-classes allow you to style various aspects of form-related elements.

:disabled pseudo-class (CSS3)

The :disabled pseudo-class selector is written using an element followed by ":", followed by "disabled".

/* syntax */
E:disabled { }

/* example */
input:disabled { }

Whitespace is not permitted within the selector.

/* Valid */
input:disabled { }

/* Invalid */
input: disabled { }

How does it work?

The :disabled pseudo-class selector targets form controls that use the disabled attribute.

In the following example, only the input element that has a disabled attribute will be selected.

/* CSS selector */
input:disabled { }

<!-- HTML markup -->
<input type="text" disabled>
<input type="text">

Specifications

W3C Selectors Level 4
Status: Working Draft

W3C CSS Basic User Interface Module Level 3
Status: Proposed Recommendation

Selectors Level 3
Status: Recommendation

Support

The :disabled pseudo-class selector is not supported by IE6, IE7 or IE8.

Exercise 1: Write a :disabled selector

Open this HTML file in an editor:
exercises-start/exercise-205-08-01.html

Write a CSS rule to style the <input> with a boolean disabled attribute. Set with border: 1px solid red.

/* Add styles here */
input:disabled {
  border: 1px solid red;
}

Check your work against the finished HTML file:
exercises-finished/exercise-205-08-01.html

:enabled pseudo-class (CSS3)

The :enabled pseudo-class selector is written using an element followed by ":", followed by "enabled".

/* syntax */
E:enabled { }

/* example */
input:enabled { }

Whitespace is not permitted within the selector.

/* Valid */
input:enabled { }

/* Invalid */
input: disabled { }

How does it work?

The :enabled pseudo-class selector targets form controls that do not use the disabled attribute.

In the following example, only the input element that does not have a disabled attribute will be selected.

/* CSS selector */
input:disabled { }

<!-- HTML markup -->
<input type="text" disabled>
<input type="text">

Specifications

W3C Selectors Level 4
Status: Working Draft

W3C CSS Basic User Interface Module Level 3
Status: Proposed Recommendation

Selectors Level 3
Status: Recommendation

Support

The :disabled pseudo-class selector is not supported by IE6, IE7 or IE8.

Exercise 2: Write an :enabled selector

Open this HTML file in an editor:
exercises-start/exercise-205-08-02.html

Write a CSS rule to style any <input> that does not have a boolean disabled attribute. Set with border: 1px solid green.

/* Add styles here */
input:enabled {
  border: 1px solid green;
}

Check your work against the finished HTML file:
exercises-finished/exercise-205-08-02.html

:checked pseudo-class (CSS3)

The :checked pseudo-class selector is written using an element followed by ":", followed by "checked".

/* syntax */
E:checked { }

/* example */
input[type=radio]:checked { }

Whitespace is not permitted within the selector.

/* Valid */
input:checked { }

/* Invalid */
input: checked { }

How does it work?

The :checked pseudo-class selector targets radio button, checkbox, or option elements that use the checked attribute.

The :checked pseudo-class selector also targets elements that have been checked or toggled to an “on” state by the user.

Users can toggle this state by checking/unchecking or selecting/deselecting an element.

In the following example, initially, only the input element that has a checked attribute will be selected.

/* CSS selector */
input:checked { }

<!-- HTML markup -->
<input type="radio" checked>
<input type="radio">

Specifications

W3C Selectors Level 4
Status: Working Draft

W3C CSS Basic User Interface Module Level 3
Status: Proposed Recommendation

Selectors Level 3
Status: Recommendation

Support

The :checked pseudo-class selector is not supported by IE6, IE7 or IE8.

Exercise 3: Write a :checked selector

Open this HTML file in an editor:
exercises-start/exercise-205-08-03.html

Write a CSS rule to style the label that comes after (or is adjacent to) an <input> that has the boolean checked attribute.

Set the color value to seagreen.

/* Add styles here */
input:checked + label {
  color: seagreen;
}

Check your work against the finished HTML file:
exercises-finished/exercise-205-08-03.html

:intermediate pseudo-class (CSS3)

The :indeterminate pseudo-class selector is written using an element followed by ":", followed by "indeterminate".

/* syntax */
E:intermediate { }

/* example */
input:intermediate { }

Whitespace is not permitted within the selector.

/* Valid */
input:intermediate { }

/* Invalid */
input: intermediate { }

By default, checkboxes and radio buttons only display two possible states - checked or unchecked.

However, checkbox inputs can have three possible visible states: checked, unchecked, or indeterminate.

For example, you may have a series of checkbox inputs that have child checkbox inputs.

Option 1: If none of the child inputs are checked, the parent input should also be displayed as unchecked.

Option 2: If all the child inputs are checked, the parent input should also be displayed as checked.

Option 3: If only some of the child inputs are checked, the parent input could be displayed as indeterminate.

The only way to make a checkbox display in this indeterminate state is by using JavaScript.

The :intermediate pseudo-class selector targets radio buttons or checkboxes that are in this indeterminate state.

In the following example, the label of any checkbox that is in the indeterminate state would be selected.

/* CSS selector */
input:indeterminate + label { }

Specifications

W3C Selectors Level 4
Status: Working Draft

W3C CSS Basic User Interface Module Level 3
Status: Proposed Recommendation

Support

The :indeterminate pseudo-class selector is not supported by IE6, IE7 or IE8.