Skip to content

Try our new Crash Courses!

Buy one of our new Crash Courses, now hosted on Podia.

Pseudo-classes – CSS

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

Back to: CSS Reference > CSS Selectors