: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 juillet 2015.
La pseudo-classe CSS :link représente un élément qui n'a pas encore été visité. Il correspond à chaque élément <a> ou <area> non visité qui possède un attribut href.
Exemple interactif
p {
font-weight: bold;
}
a: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-2">Page MDN aléatoire</a>
</li>
<li>
<a href="https://example.fr/missing-2">Page d'exemple aléatoire</a>
</li>
</ul>
Les styles définis par les pseudo-classes :link et :visited peuvent être remplacés par toute pseudo-classe d'action utilisateur ultérieure (:hover ou :active) ayant au moins la même spécificité. Pour mettre en forme correctement les liens, placez la règle :link avant toutes les autres règles liées aux liens, comme défini par l'ordre LVHA : :link — :visited — :hover — :active. Les pseudo-classes :visited et :link s'excluent mutuellement.
Note :
On utilisera :any-link pour sélectionner un élément qu'il ait été visité ou non.
Syntaxe
:link {
/* ... */
}
Exemples
Par défaut, la plupart des navigateurs appliquent une valeur spéciale color aux liens visités. Ainsi, les liens de cet exemple auront probablement des couleurs de police spéciales uniquement avant que vous ne les visitiez. (Après cela, vous devrez effacer votre historique de navigation pour les voir à nouveau.) Cependant, les valeurs background-color sont susceptibles de rester, car la plupart des navigateurs ne définissent pas cette propriété sur les liens visités par défaut.
HTML
<a href="#ordinary-target">Ceci est un lien ordinaire.</a><br />
<a href="">Vous avez déjà visité ce lien.</a><br />
<a>Le lien d'espace réservé (ne sera pas stylisé)</a>
CSS
a:link {
background-color: gold;
color: green;
}
Résultat
Spécifications
| Specification |
|---|
| HTML # selector-link |
| Selectors Level 4 # link-pseudo |
Compatibilité des navigateurs
Chargement…