This page is Ready to Use

Notice: The WebPlatform project has been discontinued when the Stewards partnership agreement ended in September 2015. This site has been frozen, and the assets we have created will remain.

:focus

Summary

The :focus pseudo-class applies while an element has the focus, i.e. accepts keyboard or mouse events, or other forms of input.

In an HTML document, an element must receive focus from the user in order to become active and perform its tasks. For example, users must set input focus on a link in order to follow it. Similarly, users must give a textarea focus in order to enter text into it.

There are several ways to give focus to an element:

  • Designate the element with a pointing device. Even elements that do not typically accept input, such as div and body elements, receive focus when clicked with the mouse.
  • Navigate through the document with the TAB and Shift+TAB keys. The document’s author may define a tabbing order that specifies the order in which elements will receive focus with the tabIndex attribute.
  • Select an element through a keyboard shortcut.

Examples

The following style rule will change the background color of any element that receives input focus:

*:focus {
    background-color: #ffc;
}

Related specifications

CSS 2.1
W3C Recommendation
Selectors Level 3
W3C Recommendation
Selectors Level 4
W3C Working Draft

See also

Related articles

Pseudo-Classes

Selectors

Attributions