CSS :any-link Pseudo-Class

CSS :any-link Pseudo-Class

The CSS :any-link pseudo-class selects hyperlinks whether they have been visited or not. It provides a convenient way to apply the same styles to both visited and unvisited links without writing separate selectors.

:any-link Syntax

:any-link {
  property: value;
}

The :any-link pseudo-class has no arguments. It can be used by itself or attached directly to another selector.

Example Syntax

a:any-link {
  color: #0056b3;
  text-decoration: underline;
}

This rule styles every <a> element that has an href attribute, regardless of whether the link has been visited.

The selector :any-link is equivalent in matching behavior to :is(:link, :visited).

How :any-link Works

Browsers distinguish between hyperlinks that have been visited and those that have not. The :link pseudo-class matches unvisited links, while :visited matches visited links.

The :any-link pseudo-class matches either state. This makes it useful when both kinds of links should share the same appearance.

Without :any-link

a:link,
a:visited {
  text-decoration: underline;
}

With :any-link

a:any-link {
  text-decoration: underline;
}

Both examples target visited and unvisited hyperlinks. The second version is shorter and easier to maintain.

Unlike :hover or :active, :any-link does not depend on whether the user is currently interacting with the link.

Elements That Match :any-link

In HTML, :any-link matches <a> and <area> elements that have an href attribute.

The presence of the href attribute matters. An anchor element without that attribute does not match :any-link.

Comparing Link Pseudo-Classes

The :any-link pseudo-class is related to several selectors that describe hyperlink states and user interactions.

Combining Link States

a:any-link {
  color: #0056b3;
}
a:hover {
  color: #c0392b;
}
a:focus-visible {
  outline: 2px solid #0056b3;
  outline-offset: 3px;
}
a:active {
  color: #8e44ad;
}

The :any-link rule provides the shared link color. The other rules provide additional feedback for hovering, keyboard focus, and activation.

When selectors have equal specificity, later declarations can override earlier ones if they affect the same property.

Visited Link Privacy

Browsers restrict how :visited can affect styling to protect browsing history. The :any-link pseudo-class is useful for shared link styles, but it does not remove those privacy restrictions or reveal whether a link has been visited.

Practical Uses

The :any-link pseudo-class is useful when links need consistent styling regardless of browsing history.

Navigation Links

.main-nav a:any-link {
  color: #fff;
  text-decoration: none;
}
.main-nav a:hover {
  text-decoration: underline;
}

These rules keep visited and unvisited navigation links the same color while adding an underline on hover.

Button-Style Links

.button-link:any-link {
  display: inline-block;
  padding: 10px 18px;
  background-color: #0066cc;
  color: #fff;
  text-decoration: none;
}
.button-link:hover {
  background-color: #004b99;
}

This example styles a hyperlink to resemble a button. It remains a link and should be used for navigation rather than actions that belong to a button element.

Distinguishing Real Links

a:any-link {
  text-decoration-thickness: 2px;
}

This selector targets anchor elements with an href attribute. Placeholder anchors without href are excluded automatically.

Best Practices

• Use :any-link when visited and unvisited links should share the same styles.
• Use :link and :visited separately when a visual distinction between the states is useful.
• Keep links recognizable through color, underlines, or other consistent visual cues.
• Provide visible keyboard focus styles with :focus-visible.
• Remember that :any-link matches only hyperlink elements, not buttons or anchors without href.
• Test link colors against their backgrounds to maintain sufficient contrast.
• Place shared :any-link styles before more specific interaction-state rules when later overrides are intended.

:any-link Example

The following example shows two hyperlinks and an anchor without an href attribute. Only the hyperlinks receive the :any-link styles.

HTML

<div class="link-demo">
  <a href="https://www.example.com/">Example Website</a>
  <a href="#example">Page Section Link</a>
  <a>Anchor Without href</a>
</div>

CSS

.link-demo a {
  display: block;
  margin-bottom: 10px;
}
.link-demo a:any-link {
  color: #0056b3;
  font-weight: bold;
  text-decoration: underline;
}
.link-demo a:any-link:hover {
  color: #c0392b;
}

Browser Result

The first two links appear blue and bold whether they have been visited or not. The anchor without href keeps its normal text appearance. Hover over either hyperlink to see its color change.

Play in Editor

Browser Support

The :any-link pseudo-class is Baseline Widely available and supported in modern browsers. For compatibility details, visit Can I Use? and search for CSS :any-link.

Specifications

The :any-link pseudo-class is defined in the Selectors Level 4 specification.

Selectors Level 4 - The :any-link Pseudo-Class