:any-link
Baseline
Widely available
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis 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://big.rakal.top/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://big.rakal.top/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
Chargement…