Does CSS have a :blur selector (pseudo-class)?
CssCss SelectorsPseudo ClassCss Problem Overview
I know there is a :focus
selector. I can't seem to find use of or documentation of a :blur
selector. Is there one?
Css Solutions
Solution 1 - Css
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:
-
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 */ }
-
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 */ }
Solution 2 - Css
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).
Solution 3 - Css
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
Solution 4 - Css
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;
}