What are User-action Pseudo Classes?

User-Action pseudo-classes require some interaction by the user in order for them to apply, such as holding a mouse pointer over an element.

  • hover: Matches when a user designates an item with a pointing device, for example holding the mouse pointer over it.
  • active: Matches when an item is being activated by the user, for example clicked on.
  • focus: Matches when an element has focus.
  • focus-visible: Matches when an element has focus and the user agent identifies that the element should be visibly focused.
  • focus-within: Matches an element to which: focus applies, plus any element that has a descendant to which: focus applies