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