CSS :link vs a Selector: Key Differences Explained

This article explores the purpose of the CSS :link pseudo-class and clarifies how it differs from the standard a tag selector. You will learn how each selector handles the href attribute, how browser history affects them, and how CSS specificity impacts your link styling.

What Is the Generic a Selector?

The a selector is a standard type (or element) selector. It targets every <a> HTML element on the page, regardless of its attributes or user interaction state.

a {
  color: blue;
  text-decoration: underline;
}

Because it targets the element itself, it applies styles to:

  • Links with an href attribute that have not been visited.
  • Links with an href attribute that have already been visited.
  • Anchor tags without an href attribute (often used as placeholders or jump targets).

The :link pseudo-class specifically targets anchor elements that represent unvisited hyperlinks. In modern CSS, it is almost always written as a:link or simply :link.

a:link {
  color: blue;
}

To match the :link selector, an element must satisfy two conditions:

  1. It must have an href attribute (making it an actual hyperlink).
  2. The URL in the href must not currently exist in the user's browser history.

Once a user clicks the link and visits the target page, the element ceases to match :link and instead matches :visited.

1. Handling of the href Attribute

The a selector targets any <a> element, even if it lacks an href attribute (such as <a id="top"> or a script-driven <a> used as a button). In contrast, :link strictly requires an href attribute. An <a> tag without an href will be ignored by :link.

2. Visited State and the LVHA Order

The a selector applies styles globally across all states unless overridden. If you set a { color: red; }, both visited and unvisited links turn red.

The :link pseudo-class is designed to work within the standard link styling order: :link, :visited, :hover, and :active (often remembered by the mnemonic LVHA). Using :link ensures that your unvisited link styles do not unintentionally overwrite :visited styles.

3. CSS Specificity

The two selectors have different specificity values:

  • The a selector has a specificity of (0, 0, 1) because it is an element selector.
  • The :link pseudo-class has a specificity of (0, 1, 0).
  • The combined selector a:link has a specificity of (0, 1, 1).

Because :link includes pseudo-class specificity, it will override rules declared by a standalone a selector, regardless of the order in your stylesheet.

When to Use Which

Use the standard a selector to define universal styles that should apply to all links across your entire site, such as font-family, cursor, display, and general layout properties.

Use :link (typically as a:link) when you want to define styles—most commonly color and text-decoration—that must apply exclusively to links the user has not yet navigated to.