A pseudo-class is used to define a special state of an element. For example, when you hover or when you click on a button, a state can be activated.
We're going to learn two easy pseudo-classes for the moment, the most common ones. You can easily add and activate other pseudo-classes when you know how to use them:
Different pseudo-classes
The two pseudo-classes are hover and active. The hover state is used when you hover over an element with the mouse. It's useful to show that the element is clickable. The active state, on the other hand, is used when you click on an element.
To use these pseudo-classes, you simply have to call them with a colon ::
.element:hover {
// Display something
}
.element:active {
// Display something
}
For the first example, we'll add some styling when hovering over the links in the menu. We want to add an underline to the link when hovering it. To do that, it will be better for us to be able to target every single <a> with a class...