Pseudo-classes

What's a Pseudo-class?

Pseudo-classes can be used to select certain states of HTML elements to style them in CSS. They are written in the format selector:pseudo-class. In this lesson, we're going to use a pseudo-class to change the color of a button when the user hovers over it.

First, we're going to make an HTML button, and give it a larger size and a color using CSS.

<button>button</button>

button {
  height: 50px;
  width: 200px;
  font-size: 30px;
  background-color: #21A0CB;
}

Now, we're going to use the :hover pseudo-class to set a different background color to the hover state of the button (still keep the previous code, though).

button:hover {
    background-color: #FEE440;
}

Now, when you hover over the button, the background color changes.

Other Pseudo-classes

Pseudo-classes are also often used with links and forms, although many can be used on other elements as well. Some commonly used pseudo-classes, other than hover, for include:

• focus - when the element is in focus, for example when you click on a text field in a form or tab through a page
• visited - a:visited is often used to change the color of a link that a user has already used before
• active - the state of the button/link when it is pressed