:any-link

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.

More Information

• Selectors Level 4 Specification (Working Draft)
• Mozilla Documentation

Related

Almanac on Dec 2, 2022

:is

:is(ul, ol) li { color: #f8a100; }

:is :where

Geoff Graham

Almanac on Jan 4, 2022

:link

a:link { color: #f8a100; }

links

Sara Cope

Almanac on Jul 14, 2021

:visited

a:visited { color: #777; }

Sara Cope

Almanac on Jul 14, 2021

:where

main :where(h1, h2, h3) { color: #f8a100; }

:where

Chris Coyier