:blur

Matches an element from a genuine focus loss until it is focused again. Unlike :not(:focus), it never matches on page load.

Syntax

selector:blur { … }

registry syntax: :blur

Parameters

None.

Return value

A pseudo-class, compiled to the marker attribute [data-rcss-blur], which the element’s own blur event sets and its next focus event removes.

Example

@keyframes shake {  25% { translate: -4px 0; }  75% { translate: 4px 0; }}input:blur:invalid {  animation: shake 250ms;  outline: 2px solid orange;}

Behavior

• Release status. The 0.9.0 release recommendation (hardening report, section H) lists :blur as stable, so this page does not mark it experimental. The runtime's describe() still reports experimental until the registry is updated.
• From a real focus loss. It never matches an element that has not been focused, so a form shows no errors before the user has visited a field.
• Retriggers. Each focus removes the marker and the next blur sets it again, so animation: shake 250ms plays once per blur. With fast focus and blur, the last event wins.
• Nested elements. Only the element that lost focus matches. For a container, use :has(:blur): a bare :blur there marks any element that loses focus while such a rule exists, as in .form:has(:blur:invalid) .hint { display: block; }.
• Cleanup. The marker goes with the element, and is removed when no :blur rule matches the element any more.

Supported contexts

• Any selector compound, and bare inside :has().

Limitations

• Not a replacement for :not(:focus): it never matches before the first focus, and stops matching at the next one.
• For plain focus styling, prefer native :focus-visible and transitions. Use :blur for something that should happen once, after the user leaves.
• :blur(when(…)), :just-focused and :just-blurred do not exist.

Examples

• Focus & blur · API examples, runs the real runtime

Related