0Pricing
CSS Academy · Lesson

:hover :focus :active and :visited

Style interactive link and button states using the most common CSS pseudo-classes.

What are Pseudo-classes?

Pseudo-classes select elements based on their state or relationship to other elements. They start with a single colon : and do not require adding attributes to HTML.

:hover

:hover applies when the user's pointer is over an element. The most common interactive state selector.

a:hover {
  color: royalblue;
  text-decoration: underline;
}

.card:hover {
  box-shadow: 0 8px 32px rgba(0,0,0,0.15);
  transform: translateY(-2px);
}

All lessons in this course

  1. :hover :focus :active and :visited
  2. :nth-child and :nth-of-type
  3. :not() :is() and :where()
  4. :checked :disabled and Form State Pseudos
← Back to CSS Academy