Does CSS have a :blur selector (pseudo-class)?

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


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 */
    }
    

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).