W3docs
it
Accedi

CSS :visited Pseudo Classe

La pseudo-classe CSS :visited seleziona e stilizza i link già visitati. Scopri la pseudo-classe con esempi pratici.

La pseudo-classe :visited seleziona i link (elementi <a> con un href) che l'utente ha già visitato. Si usa per dare ai link visitati un aspetto diverso rispetto a quelli non visitati — un classico segnale UX che indica ai lettori quali pagine hanno già aperto.

Questa pagina spiega cosa seleziona :visited, i limiti rigidi (e insoliti) che i browser impongono su cosa è possibile stilizzare con essa, perché esistono tali limiti e come combinarla con gli altri stati dei link nell'ordine corretto.

a:visited {
  color: #8ebf42;
}

Come funziona

Un link è "visitato" quando il suo URL di destinazione è presente nella cronologia del browser. Il browser applica gli stili :visited automaticamente — non è coinvolto né JavaScript né markup. Non appena l'utente fa clic (o ha già visitato l'URL in precedenza), il link corrispondente passa al suo stile visitato.

Solo gli elementi <a> con un attributo href possono corrispondere a :visited. Un'ancora priva di href (ad es. <a>testo</a>) viene trattata come segnaposto e non corrisponde mai a :link né a :visited.

Perché si possono stilizzare solo alcune proprietà

Storicamente, :visited poteva modificare quasi qualsiasi proprietà. Questo si è rivelato una grave falla per la privacy: una pagina poteva disporre migliaia di link fuori schermo e usare getComputedStyle (o effetti collaterali del layout) per rilevare quali venivano renderizzati come "visitati" — leggendo di fatto parti della cronologia di navigazione dell'utente senza permesso.

Per chiudere questa falla, i browser moderni limitano :visited alle sole proprietà del colore e mentono sullo stile calcolato affinché gli script non possano rilevare la differenza. Ecco perché impostare qualcosa come un background-image o modificare le dimensioni del box su :visited non produce alcun effetto in modo silenzioso.

Le proprietà che i browser consentono ancora su :visited:

Due regole aggiuntive rendono tutto ciò sicuro:

  • La modifica deve provenire direttamente da :visited; non è possibile, ad esempio, rendere il link trasparente su :link e rivelare uno sfondo solo su :visited.
  • Non è possibile usare rgba()/hsla() con trasparenza parziale per rivelare lo stato, e il canale alfa viene di fatto ignorato.

Se hai bisogno di una stilizzazione più ricca che dipenda dallo stato del link, applicala a uno stato che non sia :visited — come :link, :hover o :focus.

L'ordine LVHA

Quando si stilizzano tutti e quattro gli stati dei link, l'ordine delle regole è importante a causa dei pareggi di specificità CSS. La convenzione è Link, Visited, Hover, Active (memorizzato come "LoVe HAte"):

a:link    { color: #1c87c9; }  /* unvisited */
a:visited { color: #8ebf42; }  /* visited   */
a:hover   { color: #666666; }  /* mouse over */
a:active  { color: #cc0000; }  /* being clicked */

Se si mette :hover prima di :visited, un link visitato non mostrerà mai il suo colore al passaggio del mouse, perché la regola :visited successiva, con la stessa specificità, prevarrebbe.

Versione

Selectors Level 4

Selectors Level 3

Sintassi

Sintassi CSS :visited

:visited {
  css declarations;
}

Esempio del selettore :visited:

Esempio di codice CSS :visited

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      a {
        display: block;
        padding: 5px;
      }
      a:visited {
        color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>:visited selector example</h2>
    <a href="https://www.w3docs.com">W3docs</a>
    <a href="https://stackdev.io/">Stackdev</a>
  </body>
</html>
Provalo tu stesso »

Esempio di codice :visited

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

Selettori correlati

  • :link — stilizza i link che non sono ancora stati visitati.
  • text-decoration — comunemente abbinato agli stati dei link per aggiungere o rimuovere la sottolineatura.

Esercitazione

Pratica
Cosa fa il selettore :visited in CSS?
Cosa fa il selettore :visited in CSS?
Was this page helpful?