User action pseudo-classes allow you to style elements based on how users interact with them. They are commonly applied to <button> and <a> elements to provide feedback during interactions.

The syntax is as follows:

selector:pseudo-class {
  property: value;
}

• selector can be any selector we considered in the previous chapters;
• pseudo-class needs : before its declaration, and we do not add any space.

:hover

Triggers when a user points to an element with a mouse cursor. Great for creating interactive visual feedback.

:focus

Activates when an element receives keyboard focus (usually via the Tab key). To ensure accessibility, hover and focus styles are often paired, giving mouse and keyboard users a consistent experience.

The difference between :hover and :focus

• :hover reacts to mouse cursor activity;
• :focus reacts to the keyboard activity ("Tab" key).

In the following example, we have the same element with different pseudo-classes. Please pay attention to the styles.css file. We can notice that we can add the same styles for the hover and focus effect by separating the selector and pseudo-class with ,.

:active

Triggered while an element is being activated, commonly during a mouse click on buttons or links.

:visited

Applies to links after the user has already visited their destination. Browsers typically display unvisited links in blue and visited ones in purple, unless you override these styles.