Demo
Summary
A pseudo-class is prefixed with a colon and is placed right after a selector in CSS:
p:pseudo-class {
}Details
According to the MDN Web Docs, a “CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s)”. Some common pseudo-classes include :active, :hover, and :visited.
Here’s an example of the :hover pseudo-class being used with the anchor element to change its color when a user hovers over it:
a:hover {
color: red;
}You can view a list of standard pseudo-classes on MDN.
Exercises
Recreate the CSS code from the Demo section in your CSS file. Then try customizing the value for the color property.
References
Pseudo-classes on MDN