Pseudo-classes

A pseudo-class is a keyword added to selectors that specifies a special state of the selected element(s). For example, it can be used to style an element when a user hovers over it, or when a user clicks it. CSS pseudo-classes can also be used to allow styling based on elements that are in a certain state, such as being disabled or having been visited before.

In general, what makes a pseudo-class different from a regular class is that classes are used to target specific elements on the page, while pseudo-classes are used to target elements based on their state or position.

Syntax

A pseudo-class starts with a colon (:) followed by the keyword.

selector:pseudo-class {
  /* your style here */
}

Some of the most commonly used pseudo-classes are:

Example

The following example makes use of the :hover pseudo-class to change an element from purple with a dotted underline to yellow with a regular underline when a user hovers over it:

a {
  color: purple;
  text-decoration: underline dotted;
}
a:hover {
  color: yellow;
  text-decoration: underline;
}

When applied on an element, it will look like the following:

Another example would be to style all disabled buttons on the page by using the :disabled pseudo-class.

button:disabled {
  opacity: 0.5;
}

In this example, when a button is disabled, it becomes slightly less visible by reducing its opacity to 50%.