W3docs
es
Iniciar sesión

CSS :visited Pseudo Class

La pseudoclase :visited de CSS selecciona y da estilo a los enlaces ya visitados. Lee sobre la pseudoclase y practica con ejemplos.

La pseudoclase :visited apunta a los enlaces (elementos <a> con un atributo href) que el usuario ya ha visitado. Se utiliza para dar a los enlaces visitados una apariencia diferente a los no visitados — una señal clásica de UX que indica a los lectores qué páginas ya han abierto.

Esta página explica qué selecciona :visited, los estrictos (e inusuales) límites que los navegadores imponen sobre qué se puede estilizar con él, por qué existen esos límites, y cómo combinarlo con los demás estados de enlace en el orden correcto.

a:visited {
  color: #8ebf42;
}

Cómo funciona

Un enlace está "visitado" cuando su URL de destino se encuentra en el historial del navegador. El navegador aplica los estilos de :visited automáticamente — no interviene JavaScript ni marcado adicional. En cuanto el usuario hace clic (o ya ha visitado la URL anteriormente), el enlace correspondiente cambia a su estilo de visitado.

Solo los elementos <a> con un atributo href pueden coincidir con :visited. Un ancla sin href (p. ej. <a>texto</a>) se trata como un marcador de posición y nunca coincide con :link ni con :visited.

Por qué solo puedes estilizar unas pocas propiedades

Históricamente, :visited podía cambiar casi cualquier propiedad. Eso resultó ser un grave agujero de privacidad: una página podía distribuir miles de enlaces fuera de pantalla y usar getComputedStyle (o efectos secundarios de maquetación) para detectar cuáles se renderizaban como "visitados" — leyendo efectivamente partes del historial de navegación del usuario sin permiso.

Para cerrar ese agujero, los navegadores modernos restringen :visited a propiedades solo de color y falsean el estilo calculado para que los scripts no puedan detectar la diferencia. Por eso, establecer algo como una background-image o cambiar el tamaño del cuadro en :visited no hace nada silenciosamente.

Las propiedades que los navegadores aún permiten en :visited:

Dos reglas adicionales hacen que esto sea seguro:

  • El cambio debe provenir directamente de :visited; no puedes, por ejemplo, hacer el enlace transparente con :link y revelar un fondo solo en :visited.
  • No puedes usar rgba()/hsla() con transparencia parcial para filtrar el estado, y el canal alfa se ignora efectivamente.

Si necesitas un estilo más elaborado que dependa del estado del enlace, aplícalo a un estado que no sea :visited — como :link, :hover o :focus.

El orden LVHA

Cuando estilizas los cuatro estados de enlace, el orden de las reglas importa debido a los empates de especificidad CSS. La convención es Link, Visited, Hover, Active (recordado como "LoVe HAte"):

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

Si colocas :hover antes que :visited, un enlace visitado nunca mostraría su color al pasar el cursor, porque la regla :visited posterior con la misma especificidad prevalecería.

Versión

Selectors Level 4

Selectors Level 3

Sintaxis

Sintaxis CSS :visited

:visited {
  css declarations;
}

Ejemplo del selector :visited:

Ejemplo de código 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>
Pruébalo tú mismo »

Ejemplo del selector :visited con los estados de enlace no visitado, visitado, al pasar el cursor y activo:

Ejemplo de código :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>
Pruébalo tú mismo »

Selectores relacionados

  • :link — aplica estilos a los enlaces que aún no han sido visitados.
  • text-decoration — se combina habitualmente con los estados de enlace para añadir o eliminar subrayados.

Práctica

Práctica
¿Qué hace el selector :visited en CSS?
¿Qué hace el selector :visited en CSS?
Was this page helpful?