:any-link

Avatar of Geoff Graham
Geoff Graham am

DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!

Die Pseudo-Klasse :any-link in CSS bietet eine Methode zur Auswahl von Elementen, die der Quellanker eines Hyperlinks sind.

Falls der Begriff Quellanker Sie verwirrt hat, das ist ein schicker Name für das href-Attribut der HTML-Elemente <a>, <link> und <area>. (Warum Sie ein <area> oder <link> in CSS ansprechen müssten, ist mir schleierhaft, aber bitte sehr.) Die HTML-Spezifikation enthält hierzu noch viele weitere Informationen.

Ein Element, das ein href-Attribut akzeptiert und enthält, ist ein Hyperlink und wird mit :any-link ausgewählt. Dies ist eine praktische Möglichkeit, alle linkbasierten HTML-Elemente auszuwählen, die sonst vielleicht nicht zusammenhängend erscheinen, ohne den Markup zu verändern. Vielleicht existiert es, weil Sie denken könnten, dass :link alle Links auswählt, aber es schließt :visited aus, daher fasst dies alles zusammen.

Funktional ist es genau wie der Attributselektor [href].

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

Es ist erwähnenswert, dass wir dieselben HTML-Elemente auch mit der :matches()-Pseudo-Klasse auswählen könnten. Zum Beispiel wählt :matches(:link, :visited) dieselben Elemente wie :any-link aus.

Eine weitere Anmerkung ist, dass die Spezifikation zum Zeitpunkt der Erstellung dieses Textes nach Vorschlägen für alternative Namen für diesen Selektor sucht. Auch wenn noch unklar ist, ob sich der Name ändern wird, war die Pseudo-Klasse :matches() früher als :any() bekannt, was ein Hinweis sein könnte.

Browser-Unterstützung

Das :any-link-Pseudo-Element gilt als experimentelle Funktion und ist Teil der Selectors Level 4-Spezifikation, die sich derzeit im Entwurfsstatus befindet.

Für vollständige Unterstützung sollten Sie es mit Präfix verwenden

:-webkit-any-link {
}

:-moz-any-link {
}

:any-link {
}

Und denken Sie daran, diese Selektoren nicht durch Kommas zu trennen, um sie zu kombinieren, da Browser Teile, die sie nicht verstehen, verwerfen.

Diese Daten zur Browserunterstützung stammen von Caniuse, wo Sie weitere Details finden. Eine Zahl gibt an, dass der Browser die Funktion ab dieser Version unterstützt.

Desktop

ChromeFirefoxIEEdgeSafari
15*3*Nein796.1*

Mobil / Tablet

Android ChromeAndroid FirefoxAndroidiOS Safari
1271274.4*6.0-6.1*

Weitere Informationen