: n'importe quel lien - Astuces CSS

Anonim

La :any-linkpseudo-classe en CSS fournit une méthode pour sélectionner les éléments qui sont l'ancre source d'un lien hypertexte.

Si le terme ancre source vous a perdu, c'est un nom sophistiqué pour l' href attribut sur les éléments HTML , et . (Pourquoi vous auriez besoin de cibler un ou en CSS me dépasse, mais bon.) La spécification HTML a beaucoup plus d'informations à ce sujet.

Un élément qui accepte et contient un hrefattribut est un lien hypertexte et sera sélectionné avec :any-link. Cela devient un moyen pratique de sélectionner tous les éléments HTML basés sur des liens qui pourraient autrement sembler sans rapport et sans toucher au balisage. Peut-être existe-t-il parce que vous pensez peut-être :linksélectionner tous les liens, mais il manque :visited, donc cela les enroule tous ensemble.

Fonctionnellement, c'est comme le sélecteur d'attribut (href).

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

Il est à noter que nous pourrions également sélectionner les mêmes éléments HTML en utilisant la :matches()pseudo-classe. Par exemple, :matches(:link, :visited)sélectionnera les mêmes éléments que :any-link.

Une autre chose à noter est que la spécification demande actuellement des suggestions de noms alternatifs pour ce sélecteur au moment de la rédaction de cet article. Bien que l'on ne sache pas si le nom changera, la :matches()pseudo-classe était anciennement nommée, :any()ce qui pourrait être une indication.

Prise en charge du navigateur

Le :any-linkpseudo-élément est considéré comme une fonctionnalité expérimentale et fait partie de la spécification Selectors Level 4, qui est actuellement en état de brouillon de travail.

Pour un support complet, vous voudrez l'utiliser avec le préfixe:

:-webkit-any-link ( ) :-moz-any-link ( ) :any-link ( )

Et n'oubliez pas de séparer ces sélecteurs par des virgules pour les combiner, car les navigateurs lancent des sélecteurs avec des parties qu'ils ne comprennent pas.

Prise en charge du navigateur

Ces données de support de navigateur proviennent de Caniuse, qui contient plus de détails. Un nombre indique que le navigateur prend en charge la fonctionnalité dans cette version et plus.

Bureau

Chrome Firefox C'EST À DIRE Bord Safari
15 * 3 * Non 79 6,1 *

Mobile / tablette

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

En rapport

  • :link
  • :matches()
  • :visited

Plus d'information

  • Spécification de niveau 4 des sélecteurs (version de travail)
  • Documentation Mozilla