User-action pseudo-classes

Introduction

The user-action pseudo-classes allow you to style elements based on the way that users interact with these elements.

:focus pseudo-class (CSS1)

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

/* syntax */
E:focus { }

/* example */
a:focus { }

Whitespace is not permitted within the selector.

/* Valid */
a:focus { }

/* Invalid */
a :focus { }

How does it work?

The :focus pseudo-class selector targets elements that have focus (ones that accept keyboard events).

Specifications

W3C Selectors Level 4
Status: Working Draft

Selectors Level 3
Status: Recommendation

CSS Level 2 (Revision 1)
Status: Recommendation

Support

The :focus pseudo-class selector is not supported by IE6 or IE7.

Exercise 1: Write a :focus selector

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

Write a CSS rule to style the <a> element to be color: olivedrab, but only when it is in the focus state.

You will need to use TAB keystrokes to focus on the link to see the :focus state in action.

/* Add styles here */
a:focus {
  color: olivedrab;
}

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

:hover pseudo-class (CSS1)

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

/* syntax */
E:hover { }

/* example */
a:hover { }

Whitespace is not permitted within the selector.

/* Valid */
a:hover { }

/* Invalid */
a :hover { }

How does it work?

This selector targets any element when the user’s cursor is over the element, but the user has not activated it.

Specifications

W3C Selectors Level 4
Status: Working Draft

Selectors Level 3
Status: Recommendation

CSS Level 2 (Revision 1)
Status: Recommendation

Support

The :focus pseudo-class selector is not supported by IE6 or IE7.

Exercise 2: Write a :hover selector

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

Write a CSS rule to style the <a> element to be color: orangered, but only when it is in the hover state.

You will need to hover over the link to see the :hover state in action.

/* Add styles here */
a:hover {
  color: orangered;
}

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

:active pseudo-class (CSS1)

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

/* syntax */
E:active { }

/* example */
a:active { }

Whitespace is not permitted within the selector.

/* Valid */
a:active { }

/* Invalid */
a :active { }

How does it work?

The :active pseudo-class selector targets any element that is currently being activated by the user.

Specifications

W3C Selectors Level 4
Status: Working Draft

Selectors Level 3
Status: Recommendation

CSS Level 2 (Revision 1)
Status: Recommendation

Support

IE6 and IE7 only support :active on elements with the HREF attribute.

IE6 incorrectly applies this pseudo-class to links that have input focus (incorrectly applies :active for :focus).

IE6 has a “sticky active state” (active state remains active when the user returns to the page via the back button).

Exercise 3: Write an :active selector

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

Write a CSS rule to style the <a> element to be color: orchid, but only when it is in the active state.

You will need to click on the link to see the :active state in action - just as the link is activated.

/* Add styles here */
a:active {
  color: orchid;
}

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