User Action Pseudo-Classes

User Action Pseudo-classes style an interactive element based on its current state. It helps to encourage users and let them know what has just happened. Generally, we add the state pseudo-classes to the <button> and <a> elements.

The syntax is as follows:

python
9
1
2
3
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.

Note

We will consider the most helpful state pseudo-classes (hover, focus, active and visited).

Pseudo-class :hover

The :hover pseudo-class is used to respond to user actions when they interact with an item using a pointing device, such as hovering the mouse pointer over the item. We can test this out in the following example by hovering over the button and a elements to see the effect.

Pseudo-class :focus

The :focus pseudo-class functions in a similar way to the :hover pseudo-class. It responds to element focus, which is typically achieved through keyboard navigation using the "Tab" key. To ensure consistency in the behavior of interactive elements for all users, it's recommended to use both pseudo-classes together for styling. This way, users who navigate with their mouse and those who navigate with the keyboard can receive the same 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 index.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 ,.

Pseudo-class :active

:active is triggered when an item is activated, for example, clicking on a link. Although any element can be activated, this pseudo-class is generally used for links and buttons.

Pseudo-class :visited

:visited pseudo-class is applied to links that have been visited. By default, links are displayed in blue and changed to purple when visited.