: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
# selector-link
Selectors Level 4
# link-pseudo

Compatibilité des navigateurs

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
:link
:link privacy: selector does not match <link> elements

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Voir aussi