:link

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

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.

css
/* 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

Error: could not find syntax for this item

Exemples

CSS

css
a:link {
  color: red;
}

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

HTML

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

Specification
HTML Standard
# selector-link
Selectors Level 4
# link

Compatibilité des navigateurs

BCD tables only load in the browser

Voir aussi