CSS Portal

:any-link CSS Pseudo Class

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The :any-link pseudo-class matches any element that represents a hyperlink - in effect it is the union of the unvisited and visited link states. In other words, an element that would match either :link or :visited will match :any-link. In HTML this typically includes anchor-like elements such as (anchors with an href), elements, and other elements that act as hyperlinks.

Where it’s useful

  • Apply a base set of styles to all hyperlinks regardless of whether they’ve been visited.
  • Combine with other pseudo-classes (for example :hover or :focus) to target hyperlink states consistently across visited and unvisited links.
  • Reduce repetition when you want the same rules for both visited and unvisited links.

How it behaves

  • Semantically, :any-link is equivalent to the selector list :link, :visited. For example, :any-link:hover matches the same set of elements as :link:hover, :visited:hover.
  • It is a pseudo-class, so it contributes the same specificity as other pseudo-classes (one pseudo-class in the selector’s specificity).
  • The cascade and normal CSS precedence rules apply: more specific selectors or later rules win as usual.

Notes about styling visited links

  • User agents limit which computed properties can be exposed for visited links to protect user privacy (this is why certain visual changes for visited links may be restricted). It’s safe to use color-related properties for distinguishing visited/unvisited appearance; attempts to use layout or measurement changes for visited-only rules are typically ignored by browsers.

Practical examples

/* Basic base styling for all hyperlinks (visited or not) */
:any-link {
  color: #0066cc;
  text-decoration: none;
}
/* Give visited links a different color */
:any-link:visited {
color: #663399;
}
/* Hover and focus styles apply to both visited and unvisited links */
:any-link:hover,
:any-link:focus {
text-decoration: underline;
outline: none;
}
/* Combining with contextual selectors */
nav :any-link {               /* all hyperlinks inside nav */
padding: 0.25rem 0.5rem;
border-radius: 3px;
}

Example showing equivalence to :link and :visited

/* These two groups are equivalent in effect */
:any-link:hover { color: red; }
/* is the same as */
:link:hover,
:visited:hover { color: red; }

When to prefer :any-link

  • Use :any-link when you want a single rule that applies to both unvisited and visited hyperlinks and want to avoid repeating the same declarations for :link and :visited.
  • Use separate :link / :visited rules when you need different styling specifically for visited vs unvisited states (bearing in mind the privacy-driven limitations on which properties can differ for visited links).

Syntax

:any-link {
  /* ... */
}

Example

<body>

<h3>Example Links</h3>

<a href="https://www.example.com">External Link</a><br>
<a href="#section">Internal Anchor Link</a><br>
<a>Not a link (no href)</a>

</body>
/* Targets ALL links (visited + unvisited) */
a:any-link {
color: #0066cc;
text-decoration: none;
font-weight: 600;
}

/* Hover effect */
a:any-link:hover {
text-decoration: underline;
color: #003366;
}

/* Optional: focus state for accessibility */
a:any-link:focus {
outline: 2px dashed #0066cc;
outline-offset: 3px;
}

Browser Support

The following information will show you the current browser support for the CSS :any-link pseudo class. Hover over a browser icon to see the version that first introduced support for this CSS psuedo class.

This psuedo class is supported by all modern browsers.
Desktop
Chrome
Edge
Firefox
Opera
Safari
Tablets & Mobile
Chrome Android
Firefox Android
Opera Android
Safari iOS
Samsung Internet
Android WebView
-

Last updated by CSSPortal on: 1st January 2026

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!