Course Content
CSS Fundamentals
CSS Fundamentals
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:
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
andvisited
).
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.
index
index
index
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 ,
.
index
index
index
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.
index
index
index
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.
index
index
index
Everything was clear?