Link states

Learn :link, :visited, :hover and :active states.

Four states of a link

An a link lives in several states: not yet visited, visited, hovered by the mouse, being clicked. CSS gives each state its own style through pseudo-classes.

A pseudo-class is attached to the selector with a colon: a:link, a:visited, a:hover, a:active. The same link can then look different in each state, so visitors instantly see what they can click.

:link and :visited

:link matches unvisited links, while :visited matches links the user has clicked before. Because the browser remembers history, visited links often take a different color.

For example, a:link { color: steelblue; } and a:visited { color: rebeccapurple; } separate the two states. This helps visitors track where they have been.

:hover and :active

:hover matches links the mouse is over, while :active captures the moment a link is being clicked and held. Many sites change the color on :hover and use :active for subtle feedback.

Order matters: writing them in link → visited → hover → active (LVHA) order avoids clashes. Reversing the order lets a later state override the earlier one and you lose the intended effect.

Exercise Change the color on hover

Write an a:hover pseudo-class selector and assign color: tomato. When the mouse hovers the link, its color will turn tomato red.

Show example solution

/* change color on hover */
a:hover {
  color: tomato;
}

Test yourself

Which pseudo-class fires during a click?
```
a:link { color: steelblue; }
a:hover { color: tomato; }
a:active { color: firebrick; }
```
- :link
- :visited
- :hover
- :active
Show answer

:active — Correct. The :active pseudo-class captures the moment the link is held down.

Write the hover selector

____ {
  color: firebrick;
}

Show answer

a:hover {
  color: firebrick;
}

Match each state to its meaning

:link

Not yet visited
:visited

Previously clicked
:hover

Mouse over it
:active

Being clicked

Next lesson: Removing text decoration

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies