Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
User Action Pseudo-Classes | Introduction to CSS
CSS Fundamentals
course content

Course Content

CSS Fundamentals

CSS Fundamentals

1. Introduction to CSS
2. Text Styles
3. Box Model and Element Spacing
4. Flexbox
5. Decorative Effects

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 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.

html

index

css

index

js

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 ,.

html

index

css

index

js

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.

html

index

css

index

js

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.

html

index

css

index

js

index

1. Which pseudo-class is triggered when a user hovers their mouse over an element?
2. Which pseudo-class is applied to a link that has already been visited?

Which pseudo-class is triggered when a user hovers their mouse over an element?

Select the correct answer

Which pseudo-class is applied to a link that has already been visited?

Select the correct answer

Everything was clear?

Section 1. Chapter 6
We're sorry to hear that something went wrong. What happened?
some-alt