81

I know there is a :focus selector. I can't seem to find use of or documentation of a :blur selector. Is there one?

4 Answers 4

Reset to default
131

There is no :blur pseudo-class in CSS.

The dynamic pseudo-classes, like other pseudo-classes and in fact all other selectors, represent states; they do not represent events or transitions between states in terms of the document tree. To wit: the :focus pseudo-class represents an element that is in focus; it does not represent an element that has just received focus, nor does there exist a :blur pseudo-class to represent an element that has just lost focus.

Similarly, this applies to the :hover pseudo-class. While it represents an element which has a pointing device over it, there is neither a :mouseover pseudo-class for an element that has just been pointed to nor a :mouseout pseudo-class for an element that has just been pointed away from.

If you need to apply styles to an element that is not in focus, you have two choices:

  1. Use :not(:focus) (with less browser support): 

    input:not(:focus), button:not(:focus) {
    /* Styles for only form inputs and buttons that do not have focus */
}

  2. Declare a rule that applies to any element regardless of its focus state, and override for elements that have focus:

    input, button {
    /* Styles for all form inputs and buttons */
}

input:focus, button:focus {
    /* Styles for only form inputs and buttons that have focus */
}
6
  • 4
    would .button:not(:focus) equal .button? They elect the same but the latter has a specificity of 10 and the first a specificity of 20.
    – Torsten Walter
    Commented Jul 28, 2012 at 18:01
  • 2
    @Torsten Walter: No, they're different; .button will match all elements with that class whether or not they are in focus, while .button:not(:focus) will never match the elements that are matched by .button:focus. The reason why you use .button and .button:focus together is to take advantage of the cascade. But, yes, the latter is less specific.
    – BoltClock
    Commented Jul 28, 2012 at 18:02
  • 1
    Right. I didn't think about it from that perspective.
    – Torsten Walter
    Commented Jul 28, 2012 at 19:14
  • 2
    What if you want to style something only after a user focused on it the left? For example, you wouldn't want to shout at someone for not entering a password when they load the page, only after they left the input.
    – Marcel
    Commented Jul 25, 2014 at 18:33
  • 3
    @Marcel: Then you will need to use a JavaScript event handler, for example to update the element with a class corresponding to your desired styles. CSS only works with states and not events, which means as far as CSS is concerned, an element is either in focus or not in focus. In particular, it doesn't know whether or not the element has been focused since the page was loaded (unless you tell it by updating the DOM after the fact, something only a script can do).
    – BoltClock
    Commented Jan 12, 2015 at 15:18
8

No, CSS has no blur pseudo-selector, presumably because blur is more of an event than a state. (It would be unclear when something should lose its blur state).

0
4

All regular selectors are by default not focussed. So you don't need a special blur selector.

These are the selectors by precedence.

.myButton
.myButton:hover
.myButton:focus
.myButton:active
0
2

Use the general transition to set the blur transition.

.example {
  transition-property: opacity;
  transition-duration: 2s; /* This will happen after the hover state and can also be used for consistency on the overall experience */
  opacity: 0;
}
.example:hover {
  opacity: .8;
  transition-duration: .3s;
  transition-delay: .1s;
}