Interactive Pseudo-classes

You will be able to style links and controls for unvisited, visited, hover, focus, and active states using CSS pseudo-classes.

What it is

Interactive pseudo-classes are selectors that match an element based on user interaction or link history. They are not classes you add in HTML; they are built-in states. For links, the common set is :link, :visited, :hover, :focus, and :active. For buttons and form controls, :hover, :focus, and :active are especially useful. Related terms include state, focus ring, outline, and specificity.

Why it matters

• Give immediate feedback when a pointer is over a link or button.
• Show keyboard users where focus is, which is essential for accessibility.
• Distinguish visited links from unvisited links without JavaScript.
• Create a pressed effect during mouse or touch activation.
• Keep interaction styles separate from content markup.

Syntax or steps

The pattern is selector:pseudo-class { property: value; }. For links, order matters when rules have the same specificity. A safe order is :link, :visited, :hover, :focus, :active, so active can override hover and focus while the element is being pressed.

a:link { color: blue; }
a:visited { color: purple; }
a:hover { text-decoration: underline; }
a:focus { outline: 3px solid currentColor; }
a:active { color: red; }

Example

<a href="/docs">Read the docs</a>

<style>
a {
  color: #0b5fff;
  text-decoration: none;
}

a:visited {
  color: #6b3fa0;
}

a:hover {
  text-decoration: underline;
}

a:focus {
  outline: 3px solid #0b5fff;
  outline-offset: 2px;
}

a:active {
  color: #b00020;
  transform: translateY(1px);
}
</style>

Part-by-part explanation

The base a rule sets the default link color and removes the underline. a:visited changes only color because browsers restrict visited styling for privacy. a:hover adds an underline when the pointer is over the link. a:focus draws a visible outline for keyboard focus. a:active changes color and nudges the link while it is pressed.

Common mistakes

• Removing outline with outline: none without replacing it. Fix: provide a visible :focus style, such as outline or box-shadow.
• Using :visited to reveal sensitive browsing history. Fix: limit visited styles to allowed color-related properties and avoid layout changes.
• Putting :active before :hover. Fix: place :active last among equal-specificity link states.
• Styling only :hover for touch devices. Fix: also style :focus and :active, and make tap targets large enough.

When to use it

Use CSS pseudo-classes for simple visual states that the browser can detect. Use JavaScript or application classes when the state depends on logic, such as which tab is selected or whether a form is valid.

Practice

1. Add a link to a page and style :hover, :focus, and :active.
2. Tab to the link and confirm the focus outline appears.

Challenge: style a button so it darkens on hover, shows a focus ring, and moves down 1 pixel on active. Hint: use button:hover, button:focus, and button:active. Expected output: a visible hover change, a clear keyboard focus ring, and a brief press effect on click.

Quick check

Which pseudo-class should you use to show where a keyboard user is focused?

Use :focus. If you want to target keyboard focus only, use :focus-visible where supported.

Summary

Interactive pseudo-classes let CSS respond to user states without JavaScript. Keep focus visible, respect visited-link restrictions, and order rules so active states win.