Pseudo Classe CSS :link

❮ Précédent Suivant ❯

La pseudo-classe :link est utilisée pour sélectionner et styler les liens non visités et styler les liens non visités dans une page. Elle s'applique aux liens qui n'ont pas encore être visités.

Un élément peut à la fois être :visited et :active pour que la pseudo-classe :link ait un effet.

La pseudo-classe :link définit chaque <a> , <area> non visité, ou l'élément <link> qui a un attribut href.

Version

CSS1

Syntaxe

:link {
css declarations;
}

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      a:link {
      background-color: #ccc;
      }
    </style>
  </head>
  <body>
    <h2>Exemple du sélecteur :link</h2>
    <a href="https://fr.w3docs.com">w3docs</a>
    <a href="https://stackdev.io/">Stackdev</a>
  </body>
</html>

Essayez-vous-même!

Un autre exemple avec le sélecteur :link:

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      p { font-size: 20px; 
      }
      /* lien non visité */
      a:link {
      color: #ccc;
      }
      /* lien visité */
      a:visited {
      color: #1c87c9;
      }
      /* souris sur le lien */
      a:hover {
      color: #8ebf42;
      }
      /* lien sélectionné */
      a:active {
      color: #666;
      }
    </style>
  </head>
  <body>
    <h2>Exemple du sélecteur :link</h2>
    <p>Visitez notre 
      <a href="https://fr.w3docs.com/">website</a>.
    </p>
  </body>
</html>

Essayez-vous-même!

Dans cet exemple, placez le souris sur les liens et voyez comment ils seront changés:

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      a{
      display:block;
      padding:5px 0 10px;
      font-weight:bold;
      }
      a.one:link { 
      color: #ccc;
      }
      a.one:visited { 
      color: #095484;
      }
      a.one:hover { 
      color: #8ebf42;
      }
      a.two:link {
      color: #ccc;
      }
      a.two:visited {
      color: #095484;
      }
      a.two:hover {
      font-size: 150%;
      }
      a.three:link {
      color: #ccc;
      }
      a.three:visited {
      color: #095484;
      }
      a.three:hover {
      background: #8ebf42;
      }
      a.four:link {
      color: #ccc;
      }
      a.four:visited {
      color: #095484;
      }
      a.four:hover {
      font-family: monospace;
      }
      a.five:link {
      color: #095484;
      text-decoration: none;
      }
      a.five:visited {
      color: #095484; text-decoration: none; 
      }
      a.five:hover {
      text-decoration: overline underline; 
      }
    </style>
  </head>
  <body>
    <h2>Exemple du sélecteur :link </h2>
    <p>
      <a class="one" href="#">Ce lien change la couleur</a>
      <a class="two" href="#">Ce lien change la taille de police</a>
      <a class="three" href="#">Ce lien change la couleur de l'arrière-plan</a>
      <a class="four" href="#">Ce lien change la famille de police</a>
      <a class="five" href="#">Ce lien change la décoration de texte</a>
    </p>
  </body>
</html>