La pseudo-classe :link permet de sélectionner les liens à l'intérieur d'éléments. Elle sélectionnera tout lien n'ayant pas été visité, même ceux qui seraient déjà mis en forme via des sélecteurs utilisant d'autres pseudo-classes comme :hover, :active ou :visited.

/* Cible les liens qui n'ont pas encore */
/* été visités */
a:link {
  color: red;
}

Afin que la mise en forme s'applique au mieux, la règle :link doit être placée avant les autres : :link:visited:hover:active. La pseudo-classe :focus est habituellement placée juste avant ou juste après :hover, en fonction de l'effet désiré.

Note : On utilisera any-link pour sélectionner un élément qu'il ait été visité ou non.

Syntaxe

:link

Exemples

CSS

a:link {
  color: red;
}

.external:link {
  background-color: lightblue;
}

HTML

<p>Et si on allait voir 
  <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/">
  un peu de JavaScript ?
  </a>
</p>
<p>Sinon, on peut continuer à se cultiver sur CSS autre part
  <a class="external" href="https://css-tricks.com/">
  comme CSS Tricks.
  </a>
</p>

Résultat

Spécifications

Spécification État Commentaires
HTML Living Standard
La définition de ':link' dans cette spécification.
Standard évolutif  
Selectors Level 4
La définition de ':link' dans cette spécification.
Version de travail Aucune modification.
Selectors Level 3
La définition de ':link' dans cette spécification.
Recommendation Aucune modification.
CSS Level 2 (Revision 1)
La définition de ':link' dans cette spécification.
Recommendation Levée de la restriction limitant l'utilisation de cette pseudo-classe à l'élément <a>.
CSS Level 1
La définition de ':link' dans cette spécification.
Recommendation Définition initiale.

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung Internet
Support simpleChrome Support complet 1Edge Support complet OuiFirefox Support complet 1IE Support complet 3Opera Support complet 3.5Safari Support complet 1WebView Android Support complet 1.5Chrome Android ? Edge Mobile Support complet OuiFirefox Android Support complet 4Opera Android ? Safari iOS Support complet 3.2Samsung Internet Android ?

Légende

Support complet  
Support complet
Compatibilité inconnue  
Compatibilité inconnue

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : SphinxKnight, tregagnon, teoli, FredB, Delapouite, ThePrisoner
Dernière mise à jour par : SphinxKnight,