# :focus selector

Categories: Selectors > Basic Filter | Selectors > Form

## focus selector

#### version added: 1.6jQuery(':focus')

Description: Selects element if it is currently focused.

As with other pseudo-class selectors (those that begin with a ":"), it is recommended to precede `:focus` with a tag name or some other selector; otherwise, the universal selector ("*") is implied. In other words, the bare `$(':focus')` is equivalent to `$('*:focus')`. If you are looking for the currently focused element, `$( document.activeElement )` will retrieve it without having to search the whole DOM tree.

### Example:

#### Adds the focused class to whatever element has focus

    <!DOCTYPE html>
    <html>
    <head>
      <style>
    .focused {
        background: #abcdef;
    }
    </style>
      <script src="http://code.jquery.com/jquery-1.7rc2.js"></script>
    </head>
    <body>

    <div id="content">
        <input tabIndex="1">
        <input tabIndex="2">
        <select tabIndex="3">
            <option>select menu</option>
        </select>
        <div tabIndex="4">
            a div
        </div>
    </div>

    <script>
    $( "#content" ).delegate( "*", "focus blur", function( event ) {
        var elem = $( this );
        setTimeout(function() {
           elem.toggleClass( "focused", elem.is( ":focus" ) );
        }, 0);
    });
    </script>

    </body>
    </html>

#### Demo: