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é.
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 |
|---|---|---|
| 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
| Fonctionnalité | Chrome | Firefox (Gecko) | Edge | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
| Support simple | 1 | 1.0 (1.7 ou moins) | (Oui) | 3.0 | 3.5 | 1.0 |
| Fonctionnalité | Android | Firefox Mobile (Gecko) | Edge | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|
| Support simple | 1.5 | 1.0 (1.9.2) | (Oui) | ? | ? | 3.2 |