:any-link

Avatar of Geoff Graham
Geoff Graham on (Updated on )

Learn Development at Frontend Masters

The :any-link pseudo-class in CSS provides a method for selecting elements that are the source anchor of a hyperlink.

If the term source anchor lost you, that’s a fancy name for the href attribute on the HTML elements <a><link> and <area>. (Why you would need to target an <area> or <link> in CSS is beyond me, but hey.) The HTML spec has a whole lot more information on that.

An element that accepts and contains a href attribute is a hyperlink and will be selected with :any-link. This becomes a handy way of selecting all link-based HTML elements that might otherwise appear unrelated and without touching the markup. Perhaps it exists because you might think :link would select all links, but it misses :visited, so this wraps them all up together.

Functionally, it’s just like the attribute selector [href].

<a href="/link/to/thing">Howdy!</a>
:any-link {
  color: red;
  font-weight: 900;
  text-decoration: none;
}

It’s worth noting that we could also select the same HTML elements using the :matches() pseudo-class. For example, :matches(:link, :visited) will select the same elements as :any-link.

Another thing to note is that the spec is currently asking for alternative name suggestions for this selector at the time of this writing. While it’s unclear if the name will change, the :matches() pseudo-class was formerly named :any() which could be an indication.

Browser support

The :any-link pseudo-element is considered an experimental feature and is part of the Selectors Level 4 specification, which is currently in working draft status.

For full support you’d want to use it prefixed:

:-webkit-any-link {
}

:-moz-any-link {
}

:any-link {
}

And remember not to comma-separate those selectors to combine them, as browsers toss selectors with parts they don’t understand.

This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.

Desktop

ChromeFirefoxIEEdgeSafari
15*3*No796.1*

Mobile / Tablet

Android ChromeAndroid FirefoxAndroidiOS Safari
92904.4*6.0-6.1*

More Information