:any-link
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since janvier 2020.
La pseudo-classe CSS :any-link permet de représenter un élément qui agit comme la source de l'ancre d'un hyperlien (qu'il ait été visité ou non). Elle permet donc de cibler les éléments <a>, <area> ou <link> avec un attribut href. Autrement dit, elle cible les éléments qui correspondent à :link ou à :visited.
Exemple interactif
p {
font-weight: bold;
}
a:any-link {
color: forestgreen;
text-decoration-color: hotpink;
}
<p>Pages que vous avez peut-être consultées </p>
<ul>
<li>
<a href="https://developer.mozilla.org/fr/">MDN Web Docs</a>
</li>
<li>
<a href="https://www.youtube.com/YouTube">YouTube</a>
</li>
</ul>
<p>Pages peu susceptibles d'être dans votre historique :</p>
<ul>
<li>
<a href="https://developer.mozilla.org/missing-3">Page MDN aléatoire</a>
</li>
<li>
<a href="https://example.fr/missing-3">Page d'exemple aléatoire</a>
</li>
</ul>
Syntaxe
css
:any-link {
/* ... */
}
Exemples
HTML
html
<a href="https://mozilla.org">Une page différente</a><br />
<a href="#">Une ancre interne</a><br />
<a>Un lien sans cible (n'est pas mis en forme)</a>
CSS
css
a:any-link {
border: 1px solid blue;
color: orange;
}
/* Pour les navigateurs WebKit */
a:-webkit-any-link {
border: 1px solid blue;
color: orange;
}
Résultat
Spécifications
| Specification |
|---|
| Selectors Level 4 # the-any-link-pseudo |
Compatibilité des navigateurs
Loading…