CSS :link Pseudo Class

La pseudo-classe :link seleziona e stilizza i link non visitati — link che l'utente non ha ancora cliccato (o che il browser ha rimosso dalla propria cronologia). È una delle quattro pseudo-classi "stato del link" usate per controllare l'aspetto dei link mentre l'utente interagisce con essi.

Questa pagina spiega cosa corrisponde a :link, come differisce dal selettore a semplice, perché l'ordine delle regole sui link è importante, quali restrizioni sulla privacy del browser influenzano le pseudo-classi correlate, e mostra esempi eseguibili per ogni stato del link.

Cosa corrisponde a :link

La pseudo-classe :link corrisponde a ogni elemento <a>, <area> o <link> non visitato che abbia un attributo href. Un <a> senza href non è un collegamento ipertestuale e non viene selezionato da :link né da :visited.

/* Style every unvisited link */
a:link {
  color: #1c87c9;
  text-decoration: underline;
}

Un link si trova in esattamente uno di due stati della cronologia alla volta: è non visitato (:link) o visitato (:visited). Queste due pseudo-classi sono mutuamente esclusive — un singolo link non può mai corrispondere a entrambe contemporaneamente.

:link vs il selettore a semplice

Questa è una fonte comune di confusione. La differenza si riduce all'ambito:

• a seleziona ogni elemento <a>, indipendentemente dal fatto che abbia un href o dallo stato della cronologia.
• a:link seleziona solo gli elementi <a> che hanno un href e sono non visitati.

/* Applies to every <a>, including those without an href */
a {
  font-family: sans-serif;
}

/* Applies only to real, unvisited hyperlinks */
a:link {
  color: #1c87c9;
}

Usa il selettore a semplice per la tipografia di base che si applica a tutti i link. Usa a:link quando devi puntare solo ai link ipertestuali non visitati — ad esempio, per distinguerli da quelli visitati.

L'ordine LVHA: perché l'ordine delle regole è importante

Le quattro pseudo-classi dei link — :link, :visited, :hover e :active — possono tutte applicarsi allo stesso elemento contemporaneamente. Poiché condividono la stessa specificità (0,1,0), l'ultima regola corrispondente nel sorgente prevale. Scriverle nell'ordine sbagliato fa sì che una regola successiva ne annulli silenziosamente una precedente.

L'ordine sicuro e convenzionale è LVHA — Link, Visited, Hover, Active (mnemonica: "LoVe, HAte"):

a:link    { color: #1c87c9; }  /* unvisited */
a:visited { color: #8ebf42; }  /* already visited */
a:hover   { color: #095484; }  /* pointer over the link */
a:active  { color: #666666; }  /* being clicked */

Perché questo ordine funziona:

• :hover viene dopo sia :link che :visited, quindi il colore hover viene mostrato indipendentemente dal fatto che il link sia stato visitato o meno.
• :active viene per ultimo, così prevale nel breve momento del click, anche se anche :hover corrisponde contemporaneamente.

Se si invertisse :link e :hover, il colore di :link sovrascriverà il colore hover sui link non visitati, e il passaggio del mouse sembrerebbe non avere alcun effetto.

Specificità

:link ha una specificità di (0,1,0) — una pseudo-classe. Questa è la stessa specificità di :visited, :hover, :focus e :active, motivo per cui l'ordine è così importante (vedi LVHA sopra). L'aggiunta di un selettore di tipo aumenta la specificità a (0,1,1):

/* specificity (0,1,1) — type + pseudo-class */
a:link {
  color: #1c87c9;
}

/* specificity (0,2,1) — type + class + pseudo-class — wins */
a.nav-link:link {
  color: #ff6600;
}

Focus da tastiera e accessibilità

:link e :visited coprono l'interazione con il mouse e il puntatore, ma gli utenti che navigano con la tastiera usano il tasto Tab per spostarsi tra i link. Stilizza anche lo stato :focus, in modo che gli utenti da tastiera vedano un indicatore visivo chiaro:

a:link    { color: #1c87c9; }
a:visited { color: #8ebf42; }
a:hover   { color: #095484; }
a:focus   { outline: 2px solid #095484; outline-offset: 2px; }
a:active  { color: #666666; }

Sintassi

selector:link {
  /* CSS declarations */
}

La forma più comune è a:link, ma :link è valido su qualsiasi elemento che possa essere un collegamento ipertestuale:

a:link    { color: #1c87c9; }
area:link { outline: 2px dashed #1c87c9; }

Esempi

Stilizzazione di base per link non visitati

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      a:link {
        background-color: #ccc;
      }
    </style>
  </head>
  <body>
    <h2>:link selector example</h2>
    <a href="https://www.w3docs.com">w3docs</a>
    <a href="https://stackdev.io/">Stackdev</a>
  </body>
</html>

Tutti e quattro gli stati del link con ordine LVHA

Questo esempio applica colori distinti a tutti e quattro gli stati del link. Passa il mouse o clicca sul link per vedere ogni stato in azione.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        font-size: 20px;
      }
      /* unvisited link */
      a:link {
        color: #ccc;
      }
      /* visited link */
      a:visited {
        color: #1c87c9;
      }
      /* mouse over link */
      a:hover {
        color: #8ebf42;
      }
      /* selected link */
      a:active {
        color: #666;
      }
    </style>
  </head>
  <body>
    <h2>:link selector example</h2>
    <p>Visit our
      <a href="https://www.w3docs.com/">website</a>.
    </p>
  </body>
</html>

Stili multipli per link usando pseudo-classi mirate con classi

Ogni link di seguito dimostra una diversa proprietà CSS che può cambiare all'hover, combinata con :link e :visited per gli stati predefinito e visitato.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the 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>:link selector example</h2>
    <p>
      <a class="one"   href="#">This link changes color</a>
      <a class="two"   href="#">This link changes font-size</a>
      <a class="three" href="#">This link changes background-color</a>
      <a class="four"  href="#">This link changes font-family</a>
      <a class="five"  href="#">This link changes text-decoration</a>
    </p>
  </body>
</html>

Compatibilità con i browser

:link è supportato in tutti i browser moderni e fa parte di CSS fin da CSS1. Non esistono lacune di compatibilità note per l'utilizzo di base. Le restrizioni sulla privacy relative a :visited descritte sopra sono in vigore dal 2010 in tutti i principali browser.

Argomenti correlati

• :visited — stilizza i link che l'utente ha già aperto.
• :hover — stilizza un elemento mentre il puntatore si trova sopra di esso.
• :active — stilizza un link nel momento in cui viene cliccato.
• :focus — stilizza un link quando riceve il focus da tastiera.
• text-decoration — controlla la sottolineatura e altre decorazioni dei link.
• color — imposta il colore del testo dei link in ogni stato.
• Il tag <a> — l'elemento HTML che :link prende di mira più spesso.

Pratica