0Pricing
CSS Academy · Lesson

:hover :focus :active and :visited

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

:hover :focus :active and :visited is a free CSS Academy lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the CSS Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

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);
}

:focus

:focus applies when an element receives focus (via keyboard Tab or programmatic focus). Critical for accessibility.

input:focus {
  outline: 2px solid royalblue;
  outline-offset: 2px;
}

button:focus {
  outline: 3px solid orange;
}

:focus-visible

:focus-visible is a smarter version of :focus — it only shows the focus ring when focus was received via keyboard, not mouse. This gives keyboard users focus indicators without mouse-click rings.

button:focus-visible {
  outline: 3px solid royalblue;
}

button:focus:not(:focus-visible) {
  outline: none; /* no ring on mouse click */
}

:focus-within

:focus-within applies to an element when any of its descendants have focus. Useful for styling form containers or search bars when active.

.search-form:focus-within {
  border-color: royalblue;
  box-shadow: 0 0 0 3px rgba(65,105,225,0.2);
}

:active

:active applies while an element is being activated — during a mouse click or touch. Creates visual feedback for interactive elements.

button:active {
  transform: scale(0.97);
  box-shadow: none;
}

:visited

:visited styles links the user has already visited. Due to privacy concerns, only a limited set of properties can be styled with :visited (color, background-color, border-color, outline-color).

a:visited {
  color: purple;
}

Link States Order (LVHA)

When styling all four link states, follow the LVHA order to prevent specificity issues: Link, Visited, Hover, Active.

a:link    { color: royalblue; }
a:visited { color: purple; }
a:hover   { color: dodgerblue; }
a:active  { color: red; }

Hover on Touch Devices

Touch screens do not have a hover state in the same way as mice. :hover may be briefly activated on tap. For touch-specific interactions, use :active or the @media (hover: none) media query.

Combining States

Pseudo-classes can be chained to style multiple states simultaneously:

a:visited:hover {
  color: mediumpurple;
}

button:focus:not(:focus-visible) {
  outline: none;
}

Transition Hover States

Smooth hover effects using transitions on the base state (not the :hover state) so the transition plays in both directions:

.btn {
  background: royalblue;
  transition: background 200ms ease, transform 150ms ease;
}

.btn:hover {
  background: dodgerblue;
  transform: translateY(-1px);
}

Quick Check

Which pseudo-class shows focus styles only for keyboard navigation, not mouse clicks?

Recap

:hover activates on pointer over; :focus on input focus; :active during click; :visited for visited links. Use :focus-visible for keyboard-only focus rings. Follow LVHA order for link states. Always provide visible focus indicators for accessibility.

Frequently asked questions

Is the “:hover :focus :active and :visited” lesson free?

Yes — the full text of “:hover :focus :active and :visited” is free to read here on the web, and the CSS Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the CSS Academy course, upgrade to CoddyKit PRO.

What will I learn in “:hover :focus :active and :visited”?

Style interactive link and button states using the most common CSS pseudo-classes. You practise CSS Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start CSS Academy?

No prior experience is required. CSS Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “:hover :focus :active and :visited” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this CSS Academy lesson?

Yes. Every CSS Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

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