CSS :link Selector

What You’ll Learn

The :link pseudo-class targets unvisited anchor links. It is the foundation of hyperlink styling alongside :visited, :hover, and :active.

Introduction

The CSS :link selector is used to target unvisited links on a webpage. It allows you to style hyperlinks that have not been clicked yet, helping differentiate between visited and unvisited links.

This is useful for enhancing user experience by visually guiding users through available links on your site.

Definition and Usage

Write a:link to style anchor elements with an href attribute in their default, unvisited state. Once a user visits the URL, the link moves to the :visited state instead.

📝 Syntax

The syntax for the :link pseudo-class is:

a:link {
  /* CSS properties */
}

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

Basic Example

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

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

LVHA Declaration Order

Syntax Rules

• Only matches <a> elements with an href attribute.
• Applies to links the browser has not yet visited in this session/history.
• Declare before :visited, :hover, and :active (LVHA).
• Does not match <a> without href (placeholder anchors).
• Pair with :visited so users can distinguish clicked links.

Related Selectors

• :visited — styles links the user has already visited
• :hover — styles links while the pointer rests over them
• :active — styles links while being clicked
• :focus — styles links when focused via keyboard
• :any-link — matches both unvisited and visited links

When to Use :link

:link is essential for hyperlink presentation:

• Default link color — Set the base appearance for all unclicked links.
• Navigation menus — Style menu items before users explore the site.
• Content links — Distinguish inline links in articles from body text.
• Branded design — Remove default blue underline for a custom look.
• Visited vs unvisited — Help users see which pages they have not opened yet.

Examples Gallery

Practice :link with basic styling, navigation menus, the full LVHA stack, and focus states.

<style>
  a:link {
    color: #2563eb;
    text-decoration: none;
    font-weight: 700;
  }
  a:visited {
    color: #7c3aed;
    text-decoration: underline;
  }
</style>

<p>
  Visit:
  <a href="https://www.example.com">Example</a>
  <a href="https://www.anotherexample.com">Another Example</a>
</p>

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

nav a:visited {
  color: #64748b;
}

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

a:visited {
  color: #7c3aed;
}

a:hover {
  text-decoration: underline;
}

a:active {
  color: #b91c1c;
}

a:link {
  color: #2563eb;
  text-decoration: underline;
}

a:focus-visible {
  outline: 3px solid #2563eb;
  outline-offset: 2px;
  border-radius: 2px;
}

💬 Usage Tips

• Pair with :visited — Always style both so users can distinguish clicked and unclicked links.
• LVHA order — Declare :link, :visited, :hover, :active in that sequence.
• Include :focus — Add :focus-visible for keyboard accessibility.
• Scope selectors — Use nav a:link or .content a:link for targeted styling.
• Contrast matters — Ensure link colors stand out from body text and meet WCAG contrast ratios.

⚠️ Common Pitfalls

• Missing href — :link does not apply to <a> without an href attribute.
• Same styles for :link and :visited — Users cannot tell which links they have already opened.
• Wrong LVHA order — Hover or active styles may not appear if declared before :visited.
• Removing all underlines — Without another visual cue, links can be hard to spot in paragraphs.
• Styling buttons as links — Use <button> for actions; reserve <a> for navigation.

♿ Accessibility

• Visible links — Do not rely on color alone; use underline, icons, or bold weight where needed.
• Focus indicators — Never remove focus outlines without providing an alternative (:focus-visible).
• Contrast ratios — Link text must meet WCAG AA contrast against its background (4.5:1 for normal text).
• Meaningful link text — Avoid “click here”; describe the destination in the anchor text.
• Visited state — Helps users with cognitive disabilities track where they have been.

💡 Best Practices