CSS :link Pseudoclase

La pseudoclase :link selecciona y estiliza enlaces no visitados — enlaces en los que el usuario aún no ha hecho clic (o que el navegador ha eliminado de su historial). Es una de las cuatro pseudoclases de "estado de enlace" que se usan para controlar el aspecto de los enlaces mientras el usuario interactúa con ellos.

Esta página explica qué coincide con :link, en qué se diferencia del selector a simple, por qué importa el orden de las reglas de enlace, qué restricciones de privacidad del navegador afectan a las pseudoclases relacionadas, y muestra ejemplos ejecutables para cada estado de enlace.

Qué coincide con :link

La pseudoclase :link coincide con todos los elementos <a>, <area> o <link> no visitados que tienen un atributo href. Un <a> sin href no es un hipervínculo y no es seleccionado por :link ni por :visited.

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

Un enlace se encuentra exactamente en uno de dos estados de historial a la vez: o no está visitado (:link) o está visitado (:visited). Estas dos pseudoclases son mutuamente excluyentes — un solo enlace nunca puede coincidir con ambas al mismo tiempo.

:link frente al selector a simple

Esta es una fuente habitual de confusión. La diferencia se reduce al alcance:

• a selecciona todos los elementos <a>, independientemente de si tienen un href o de cuál sea su estado de historial.
• a:link selecciona solo los elementos <a> que tienen un href y están no visitados.

/* 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 el selector a simple para la tipografía base que se aplica a todos los anclajes. Usa a:link cuando necesites apuntar solo a hipervínculos no visitados — por ejemplo, para distinguirlos de los visitados.

El orden LVHA: por qué importa el orden de las reglas

Las cuatro pseudoclases de enlace — :link, :visited, :hover y :active — pueden aplicarse al mismo elemento simultáneamente. Como comparten la misma especificidad (0,1,0), la última regla coincidente en el código fuente gana. Escribirlas en el orden incorrecto hace que una regla posterior cancele silenciosamente a una anterior.

El orden seguro y convencional es LVHA — Link, Visited, Hover, Active (regla mnemotécnica: "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 */

Por qué funciona este orden:

• :hover viene después de :link y :visited, de modo que el color al pasar el cursor se muestre independientemente de si el enlace ha sido visitado o no.
• :active viene al final para que gane durante el breve instante de un clic, aunque :hover también coincida en ese mismo momento.

Si invirtieras :link y :hover, el color de :link sobreescribiría el color de hover en los enlaces no visitados, y pasar el cursor parecería no tener ningún efecto.

Especificidad

:link tiene una especificidad de (0,1,0) — una pseudoclase. Es la misma especificidad que :visited, :hover, :focus y :active, lo que explica por qué el orden importa tanto (ver LVHA arriba). Añadir un selector de tipo eleva la especificidad 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;
}

Foco de teclado y accesibilidad

:link y :visited cubren la interacción con el ratón y el puntero, pero los usuarios de teclado navegan por los enlaces con la tecla Tab. Estiliza también el estado :focus para que los usuarios de teclado vean un indicador visual claro:

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; }

Sintaxis

selector:link {
  /* CSS declarations */
}

La forma más común es a:link, pero :link es válido en cualquier elemento que pueda ser un hipervínculo:

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

Ejemplos

Estilizado básico de enlaces no visitados

<!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>

Los cuatro estados de enlace con el orden LVHA

Este ejemplo aplica colores distintos a los cuatro estados de enlace. Pasa el cursor o haz clic sobre el enlace para ver cada estado en acción.

<!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>

Múltiples estilos de enlace usando pseudoclases orientadas a clases

Cada enlace a continuación demuestra una propiedad CSS diferente que puede cambiar al hacer hover, combinada con :link y :visited para los estados predeterminado y visitado.

<!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>

Compatibilidad con navegadores

:link es compatible con todos los navegadores modernos y ha formado parte de CSS desde CSS1. No existen problemas de compatibilidad conocidos para el uso básico. Las restricciones de privacidad sobre :visited descritas anteriormente han estado vigentes desde 2010 en todos los navegadores principales.

Temas relacionados

• :visited — estiliza los enlaces que el usuario ya ha abierto.
• :hover — estiliza un elemento mientras el puntero está sobre él.
• :active — estiliza un enlace durante el momento en que se hace clic.
• :focus — estiliza un enlace cuando recibe el foco del teclado.
• text-decoration — controla el subrayado y otras decoraciones de enlace.
• color — establece el color del texto de los enlaces en cada estado.
• La etiqueta <a> — el elemento HTML al que :link apunta con mayor frecuencia.

Práctica