← Back to pseudo-classes

CSS Pseudo-class / Element

:focus-visible

User Action

Applies styles only when focus should be visibly indicated, such as keyboard navigation.

Syntax

selector:focus-visible { }

Example

button:focus-visible { outline: 2px solid #3dffa0; }

Common use cases

  • Showing focus rings for keyboard users only
  • Hiding focus styles for mouse users without hurting accessibility
  • Building accessible UI components

Practical developer insight

Use :focus-visible for keyboard-focused states when you want to avoid showing focus rings on every mouse click — combine with :focus as a fallback for older browsers.

Related

:focus:hover:active