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

by

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

More Related Contents:

  1. css3 nth of type restricted to class [duplicate]
  2. Why isn’t it possible to combine vendor-specific pseudo-elements/classes into one rule set?
  3. How can I write a ‘:hover’ condition for ‘a:before’ and ‘a:after’?
  4. What is the difference between a pseudo-class and a pseudo-element in CSS?
  5. What is the difference between :focus and :active?
  6. How to select the first, second, or third element with a given class name?
  7. Should I use CSS :disabled pseudo-class or [disabled] attribute selector or is it a matter of opinion?
  8. What’s the difference between html[lang=”en”] and html:lang(en) in CSS?
  9. What’s the difference between CSS3’s :root pseudo class and html?
  10. Why doesn’t this CSS :not() declaration filter down?
  11. CSS 3 nth of type restricted to class [duplicate]
  12. How to show the first N elements of a block and hide the others in css?
  13. Is there an opposite CSS pseudo-class to :hover?
  14. how do I make device specific selectors in css [closed]
  15. Is there a “previous sibling” selector?
  16. What does a space mean in a CSS selector? i.e. What is the difference between .classA.classB and .classA .classB?
  17. CSS selector for first element with class
  18. What does the “+” (plus sign) CSS selector mean?
  19. Is there a CSS selector by class prefix?
  20. How do I select an element based on the state of another element in the page with CSS?
  21. Does the order of classes listed on an item affect the CSS?
  22. Select all child elements recursively in CSS
  23. How to select label for=”XYZ” in CSS?
  24. In which direction do selector engines read, exactly?
  25. Can I colour backgrounds of selected items in HTML select options with CSS only?
  26. CSS3 combining selectors with OR instead of AND
  27. What is the difference between :before and ::before?
  28. What CSS selector can be used to select the first div within another div
  29. CSS Selector for not a child of element type?
  30. CSS selector based on width?

Leave a Comment