Codectionary / Developer documentation / CSS

Interactive Pseudo-classes

These pseudo-classes style elements based on user interaction state. :hover applies while the pointer is over an element, :focus while it has keyboard focus, :active during the moment of being clicked/pressed, and :visited for links the user has already navigated to.

Syntax

:hover, :focus, :active, :visited

Examples

The Interaction State Order

A button styled across its different interactive states.

/* Demo setup: sizing, structure or neutral surfaces. */
button{padding:1rem;color:white;border:2px solid #1e3a8a;border-radius:.5rem}

.button {
  background: #3b82f6;
  transition: background 0.15s ease;
}

.button:hover {
  background: #2563eb;
}

.button:focus {
  outline: 2px solid #93c5fd;
  outline-offset: 2px;
}

.button:active {
  background: #1d4ed8;
}
  1. The button can actually receive hover, focus and pressed states.
  2. The corresponding pseudo-class rules apply as you interact.
  3. Use Tab to inspect keyboard focus as well as the mouse; do not communicate an essential state only through colour.
HTML used by this example
<button class="button">Hover, focus and press</button>

Styling Visited Links

A subtle way to indicate previously-visited pages.

a:visited {
  color: #6b21a8; /* a slightly muted purple, distinct from the unvisited link color */
}
  1. The link has a real destination, so visited styling has a meaningful target.
  2. Whether it appears visited depends on the browser’s history and privacy behaviour.
  3. Scripts cannot reliably inspect visited status through computed styles; this is not a feature that can be forced on with a CSS class.
HTML used by this example
<a href="https://example.com" target="_blank" rel="noreferrer">A visitable example link</a><p>Visited-link colour depends on browser history and privacy rules.</p>

Parameters and values

  • :hover (pseudo-class): Applies while the pointer is over the element
  • :focus (pseudo-class): Applies while the element has keyboard/programmatic focus
  • :active (pseudo-class): Applies during the moment of being clicked or pressed
  • :visited (pseudo-class): Applies to links the user has already navigated to

Best practices

  • Never remove focus outlines (outline: none) without providing a clearly visible custom alternative - it is essential for keyboard navigation accessibility
  • Style hover states as a nice-to-have enhancement, not a requirement - hover has no equivalent on touchscreens
  • Follow the LVHA order (:link, :visited, :hover, :active) when declaring these together, since later rules override earlier ones at equal specificity
  • Use :focus-visible instead of :focus alone in modern projects, so focus rings only show for keyboard users, not every mouse click

Browser compatibility

chrome
Yes
firefox
Yes
safari
Yes
edge
Yes

These are the existing reference’s support labels, not tested minimum versions. Individual values and APIs can have different support. Check the linked specification before choosing a browser target.

CSS specifications (modules)

Specifications & further reading