Skip to content

Try our new Crash Courses!

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

Pseudo-classes – CSS



A pseudo-class is prefixed with a colon and is placed right after a selector in CSS:

p:pseudo-class {



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.


Recreate the CSS code from the Demo section in your CSS file. Then try customizing the value for the color property.


Pseudo-classes on MDN

Back to: CSS Reference > CSS Selectors