80

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

T J
  • 42,762
  • 13
  • 83
  • 138

4 Answers4

126

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 */
}
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
  • 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 Jul 28 '12 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 Jul 28 '12 at 18:02
  • 1
    Right. I didn't think about it from that perspective. – Torsten Walter Jul 28 '12 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 Jul 25 '14 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 Jan 12 '15 at 15:18
  • @BoltClock That's ok. I know how to do it with JavaScript. I just hoped it was possible with CSS. – Marcel Jan 12 '15 at 23:36
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).

Mitya
  • 33,629
  • 9
  • 60
  • 107
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
Torsten Walter
  • 5,614
  • 23
  • 26
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;
}
Barry Michael Doyle
  • 9,333
  • 30
  • 83
  • 143
userDepth
  • 173
  • 1
  • 1
  • 8