CSS :visited Pseudo-Class

CSS :visited Pseudo-Class

The CSS :visited pseudo-class selects hyperlinks whose destinations have been visited according to the browser's history. It allows previously visited links to display a different color from links that have not been visited. For privacy and security reasons, browsers restrict which CSS properties can be changed using :visited and prevent websites from reading a user's browsing history through link styling.

:visited Syntax

:visited {
  property: value;
}

The :visited pseudo-class matches eligible hyperlinks whose destinations the browser considers visited.

Basic Example

a:visited {
  color: #663399;
}

Displays visited links in purple.

Class Selector

.resource-link:visited {
  color: #805080;
}

Navigation Links

.article-links a:visited {
  color: #663399;
}

No Arguments

The pseudo-class is written as :visited, without parentheses or arguments.

Eligible Elements

The selector applies to hyperlinks, primarily <a> elements with an href attribute and other elements that can represent hyperlinks.

How :visited Works

Browsers maintain information about previously visited destinations. The :visited pseudo-class allows limited visual styling based on that information.

Step 1 - Create a Link

<a href="https://example.com/">Example Website</a>

Step 2 - Style Unvisited Links

a:link {
  color: #0066cc;
}

Step 3 - Style Visited Links

a:visited {
  color: #663399;
}

Step 4 - Visit the Destination

After the destination has been visited, the browser may display matching links using the visited-link color.

Step 5 - Return to the Page

The link may now appear purple instead of blue, depending on the browser's history and privacy behavior.

No JavaScript Required

The browser determines visited-link styling automatically. JavaScript cannot reliably read whether a link is visited.

Link States

CSS provides several pseudo-classes for styling hyperlinks in different states.

Unvisited Link

a:link {
  color: #0066cc;
}

Visited Link

a:visited {
  color: #663399;
}

Hover State

a:hover {
  text-decoration: underline;
}

Active State

a:active {
  color: #cc3300;
}

Visited links can also be hovered, focused, or activated. The CSS cascade determines which applicable declarations take precedence.

Link Styling Order

When link state selectors have equal specificity, the order of CSS rules can affect which styles appear.

Recommended Order

a:link {
  color: #0066cc;
}
a:visited {
  color: #663399;
}
a:hover {
  color: #cc3300;
}
a:active {
  color: #990000;
}

The traditional order is Link, Visited, Hover, Active, often remembered as LVHA.

Why Order Matters

A visited link can also match :hover. With equal specificity, the later applicable color declaration takes precedence.

Focus Styling

a:focus-visible {
  outline: 2px solid #006699;
  outline-offset: 2px;
}

Focus indicators should remain visible regardless of whether a link has been visited.

Specificity Still Applies

The LVHA order is a useful convention, but more specific selectors or other cascade factors can override these rules.

Privacy Restrictions

Browsers deliberately limit :visited styling to prevent websites from discovering which pages a user has visited.

History Detection

Without restrictions, a website could attempt to inspect the appearance of links pointing to other websites and infer a user's browsing history.

Limited Styling

Browsers allow only certain color-related properties to differ between visited and unvisited links.

Computed Styles

JavaScript methods such as getComputedStyle() do not reveal the actual visited-link color. Browsers report values as though the link were unvisited.

Selector Matching

Browser APIs that inspect selector matching do not expose reliable visited history information.

Privacy Modes

Private browsing, cleared history, and browser-specific privacy features can affect which links appear visited.

Do Not Depend on History

Visited styling is a visual convenience, not a reliable method for tracking navigation or recording user progress.

Allowed CSS Properties

Browsers permit a limited set of color properties to change through :visited, subject to additional restrictions.

Text Color Example

a:visited {
  color: #663399;
}

Border Color Example

a {
  border-bottom: 2px solid transparent;
}
a:visited {
  border-bottom-color: #663399;
}

Text Decoration Color Example

a:visited {
  text-decoration-color: #663399;
}

Alpha Channel Restrictions

The alpha component of a visited color cannot be used to reveal history. Browsers use the alpha component from the corresponding unvisited color, and a fully transparent unvisited color cannot become visible solely through :visited.

Existing Borders and Decorations

Changing a permitted color does not create a border or text decoration that does not otherwise exist. Define the border or decoration in the normal link styles.

Restricted CSS Properties

Properties that could reveal visited history through layout, dimensions, or other visual changes cannot vary based on :visited.

Restricted Example

a:visited {
  font-size: 20px;
  background-image: url("visited-icon.png");
}

Browsers do not allow these declarations to change the link's appearance based on whether the destination has been visited.

Use Permitted Colors Instead

a:visited {
  color: #663399;
}

Color differences are the recommended way to distinguish visited links.

Browser History

The :visited pseudo-class depends on browser-managed navigation history rather than information stored by the website.

Previously Visited Destinations

A hyperlink may match :visited when the browser recognizes its destination as previously visited.

Clearing Browsing History

Clearing history can cause links to return to their unvisited appearance.

Private Browsing

Private browsing sessions can maintain separate or temporary history information.

Different Browsers

Visited-link information is browser-specific. A link that appears visited in one browser may appear unvisited in another.

URL Differences

Different URLs, including variations in paths, queries, or fragments, may be treated differently by the browser's history system.

Not a Tracking Mechanism

Websites cannot reliably use :visited to determine whether a user has opened a particular external website.

:visited Specificity

The :visited pseudo-class contributes a specificity of 0-1-0, like other standard pseudo-classes.

Specificity Examples

Specificity Example

a {
  color: #0066cc;
}
a:visited {
  color: #663399;
}

The second selector has higher specificity and applies the visited color when the link matches :visited, subject to browser privacy restrictions and other cascade factors.

Accessibility

Visited-link styling can help users recognize pages they have previously opened, particularly in lists of search results, documentation, and articles.

Maintain Color Contrast

Choose visited and unvisited link colors that remain readable against the page background.

Keep Links Recognizable

Do not rely solely on a color difference to identify clickable text. Underlines or other consistent visual cues can help.

Preserve Focus Indicators

a:focus-visible {
  outline: 2px solid #006699;
  outline-offset: 2px;
}

Avoid Color-Only Instructions

Do not instruct users to identify visited content only by its color. Some users may not perceive the difference.

Do Not Assume Completion

A visited link does not prove that the user read, understood, or completed the destination page.

Best Practices

• Use :visited primarily for permitted color changes.
• Provide a clear visual distinction between visited and unvisited links when useful.
• Maintain adequate contrast for both link states.
• Follow the traditional :link, :visited, :hover, :active order when selectors have equal specificity.
• Keep keyboard focus indicators visible.
• Do not rely on restricted properties such as font-size, display, or background-image for visited styling.
• Do not use visited-link appearance to track user activity or completion.
• Test links using browser history rather than attempting to inspect visited state through JavaScript.
• Remember that private browsing and cleared history can affect visited-link appearance.

:visited Example

This example demonstrates the difference between visited and unvisited links. Click one of the links and return to the example. The browser may display the visited link in purple while unvisited links remain blue.

HTML

<div class="visited-demo">
  <p>Select a page:</p>
  <ul>
    <li><a href="https://example.com/" target="_blank" rel="noopener">Example Website</a></li>
    <li><a href="https://www.w3.org/" target="_blank" rel="noopener">W3C Website</a></li>
    <li><a href="https://developer.mozilla.org/" target="_blank" rel="noopener">MDN Web Docs</a></li>
  </ul>
</div>

CSS

.visited-demo a:link {
  color: #0066cc;
}
.visited-demo a:visited {
  color: #663399;
}
.visited-demo a:hover {
  text-decoration: underline;
}
.visited-demo a:active {
  color: #cc3300;
}
.visited-demo a:focus-visible {
  outline: 2px solid #006699;
  outline-offset: 2px;
}

Browser Result

Play in Editor

Note: The appearance of the links depends on your browser history. Some links may already appear visited. Browser privacy settings can also affect the result.

Browser Support

Baseline: Widely available. The :visited pseudo-class is supported in all major modern browsers, including Chrome, Edge, Firefox, Safari, and Opera. Browsers enforce privacy restrictions on visited-link styling.

For current compatibility information, visit Can I Use? and search for :visited.

Specifications

The :visited pseudo-class is defined in CSS Selectors Level 4 as a hyperlink pseudo-class. Browsers apply additional privacy restrictions to prevent visited-link history detection.

Selectors Level 4 - The Link History Pseudo-Classes