CSS :visited Selector

What You’ll Learn

The :visited pseudo-class targets hyperlinks the user has already clicked. Pair it with :link so visitors can tell which pages they have explored and which are still new.

Introduction

The CSS :visited selector targets links that the user has already visited. It is a pseudo-class that helps differentiate between visited and unvisited hyperlinks, improving navigation and usability on websites.

By applying specific styles to visited links — such as a muted purple color or an underline — you help users track their browsing history and avoid re-reading content they have already seen.

Definition and Usage

Write a:visited to style anchor elements with an href attribute after the browser records that URL in the user’s visit history. Once visited, the link no longer matches :link and instead uses your :visited rules.

📝 Syntax

The syntax for the :visited pseudo-class is:

a:visited {
  /* CSS properties */
}

The :visited pseudo-class applies only to <a> elements that have an href attribute and are in the visited state.

Basic Example

/* Unvisited links */
a:link {
  color: #2563eb;
  text-decoration: none;
}

/* Visited links */
a:visited {
  color: #7c3aed;
  text-decoration: underline;
}

LVHA Declaration Order

Privacy-Safe Properties

Browsers limit which properties can change on :visited links to protect browsing history. These properties are allowed:

Syntax Rules

• Only matches <a> elements with an href attribute.
• Applies after the browser records the URL in the user’s history.
• Declare after :link and before :hover and :active (LVHA).
• Stick to privacy-safe color properties for reliable cross-browser results.
• Pair with :link so unvisited and visited links look distinct.

Related Selectors

• :link — styles unvisited hyperlinks
• :hover — styles links while the pointer rests over them
• :active — styles links while being clicked
• :focus — styles links when focused via keyboard

When to Use :visited

:visited improves hyperlink UX in these scenarios:

• Article link lists — Show which tutorials or docs the reader has already opened.
• Documentation sidebars — Mute visited chapter links so new sections stand out.
• Search results — Help users avoid clicking the same result twice.
• Resource pages — Track external links the user has already explored.
• Multi-page guides — Indicate progress through a series of linked lessons.

Examples Gallery

Practice :visited with basic styling, navigation menus, resource lists, and privacy-safe color changes.

a:link {
  color: #2563eb;
  text-decoration: none;
  font-weight: 700;
}

a:visited {
  color: #7c3aed;
  text-decoration: underline;
}

nav a:link {
  color: #1e293b;
  text-decoration: none;
  font-weight: 600;
}

nav a:visited {
  color: #94a3b8;
  font-weight: 500;
}

nav a:hover {
  background-color: #e2e8f0;
}

.resources a:link {
  color: #2563eb;
  text-decoration: none;
}

.resources a:visited {
  color: #9333ea;
  text-decoration: line-through;
  text-decoration-color: #c4b5fd;
}

.resources li {
  margin-bottom: 0.5rem;
}

a:link {
  color: #2563eb;
  background-color: transparent;
  border: 1px solid transparent;
}

a:visited {
  color: #6d28d9;
  background-color: #f5f3ff;
  border-color: #ddd6fe;
}

💬 Usage Tips

• Pair with :link — Always define both unvisited and visited styles together.
• LVHA order — Place :visited immediately after :link in your stylesheet.
• Use color contrast — Visited links should still be readable against the page background.
• Stick to safe properties — Use color, background-color, and border-color for reliable results.
• Scope when needed — Use nav a:visited or .sidebar a:visited for targeted menus.

⚠️ Common Pitfalls

• Identical :link and :visited styles — Users cannot tell which pages they have already opened.
• Blocked properties — font-size, display, content, and background-image do not work on :visited links.
• Wrong LVHA order — Declaring :hover before :visited can prevent hover styles from appearing on visited links.
• Missing href — :visited does not apply to <a> elements without an href attribute.
• Cache confusion — Browser history can make a link appear visited even if the user did not click it recently; clearing history resets the state.

♿ Accessibility

• Do not rely on color alone — Combine color changes with underline, weight, or icons (on the unvisited state) for clarity.
• Maintain contrast — Visited link colors must still meet WCAG AA contrast ratios (4.5:1 for normal text).
• Focus indicators — Add :focus-visible styles so keyboard users can navigate links.
• Meaningful link text — Describe the destination; visited state is a bonus cue, not a replacement for clear labels.
• Cognitive support — Visited styling helps users with memory challenges track what they have already read.

💡 Best Practices