: any-link - CSS-Tricks

Anonim

Die :any-linkPseudoklasse in CSS bietet eine Methode zum Auswählen von Elementen, die der Quellanker eines Hyperlinks sind.

Wenn der Begriff Quelle Anker Sie verloren, das ist ein ausgefallener Name für das href Attribut in den HTML - Elementen , und . (Warum Sie ein oder in CSS als Ziel festlegen müssten, ist mir ein Rätsel, aber hey.) Die HTML-Spezifikation enthält viel mehr Informationen dazu.

Ein Element, das ein hrefAttribut akzeptiert und enthält , ist ein Hyperlink und wird mit ausgewählt :any-link. Dies ist eine praktische Möglichkeit, alle linkbasierten HTML-Elemente auszuwählen, die ansonsten möglicherweise nicht miteinander zusammenhängen, ohne das Markup zu berühren. Vielleicht existiert es, weil Sie vielleicht denken, :linkdass alle Links ausgewählt werden, aber es fehlt :visited, so dass dies alle zusammenfasst.

Funktionell ist es genau wie bei der Attributauswahl (href).

Howdy!
:any-link ( color: red; font-weight: 900; text-decoration: none; )

Es ist erwähnenswert, dass wir dieselben HTML-Elemente auch mithilfe der :matches()Pseudoklasse auswählen können . Wählt zum Beispiel :matches(:link, :visited)die gleichen Elemente aus wie :any-link.

Eine andere Sache, die zu beachten ist, ist, dass die Spezifikation derzeit nach alternativen Namensvorschlägen für diesen Selektor zum Zeitpunkt dieses Schreibens fragt. Während es unklar ist, ob sich der Name ändern wird, :matches()wurde früher :any()die Pseudoklasse benannt, was ein Hinweis sein könnte.

Browser-Unterstützung

Das :any-linkPseudoelement wird als experimentelles Merkmal betrachtet und ist Teil der Selectors Level 4-Spezifikation, die sich derzeit im Status eines Arbeitsentwurfs befindet.

Für die vollständige Unterstützung möchten Sie das 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 Selektoren mit Teilen werfen, die sie nicht verstehen.

Browser-Unterstützung

Diese Browser-Unterstützungsdaten stammen von Caniuse, das detaillierter ist. Eine Zahl gibt an, dass der Browser die Funktion ab dieser Version unterstützt.

Desktop

Chrom Feuerfuchs IE Kante Safari
15* 3* Nein 79 6.1 *

Handy / Tablet

Android Chrome Android Firefox Android iOS Safari
88 85 4,4 * 6,0-6,1 *

verbunden

  • :link
  • :matches()
  • :visited

Mehr Informationen

  • Spezifikation der Selektoren Stufe 4 (Arbeitsentwurf)
  • Mozilla-Dokumentation