Skip to content

Help us create more tutorials! Make a donation using the Donate button or become a member using the button below to hide this banner and track your progress.

Pseudo-classes – CSS

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.

Demo

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

Back to: CSS Course > CSS Selectors