---
title: ':link'
slug: 'Web/CSS/:link'
tags:
  - CSS
  - Diseño
  - Pseudo-clase
  - Referencia
  - Web
translation_of: 'Web/CSS/:link'
---
<div>{{ CSSRef }}</div>

<p>La <a href="/es/docs/Web/CSS/Pseudo-classes">pseudo-clase</a> <strong><code>:link</code></strong> <a href="/es/docs/Web/CSS">CSS</a> representa un elemento que aún no se ha visitado. Coincide con cada elemento no visitado {{HTMLElement("a")}}, {{HTMLElement("area")}}, o {{HTMLElement("link")}} que tiene un atributo <code>href</code>.</p>

<pre class="brush: css no-line-numbers">/* Selecciona cualquier &lt;a&gt; que aún no se haya visitado */
a:link {
  color: red;
}</pre>

<p>Los estilos definidos por la pseudo-clase <code>:link</code> serán anulados por cualquier pseudo-clase posterior relacionada con el enlace ({{cssxref(":active")}}, {{cssxref(":hover")}}, o {{cssxref(":visited")}}) que tenga al menos la misma especificidad. Para darle un estilo apropiado a los enlaces, coloque la regla <code>:link</code> antes de todas las demás reglas relacionadas con el enlace, tal como lo define el <em>orden LVHA</em>: <code>:link</code> — <code>:visited</code> — <code>:hover</code> — <code>:active</code>.</p>

<div class="note">
<p><strong>Nota:</strong> Use {{cssxref(":any-link")}} para seleccionar un elemento independientemente de si ha sido visitado o no.</p>
</div>

<h2 id="Sintaxis">Sintaxis</h2>

{{csssyntax}}

<h2 id="Ejemplos">Ejemplos</h2>

<p>Por defecto, la mayoría de los navegadores aplican un valor especial {{cssxref("color")}} a los enlaces visitados. Por lo tanto, los enlaces de este ejemplo probablemente tendrán colores de fuente especiales solo antes de visitarlos. (Después de eso, deberá borrar el historial de su navegador para volver a verlos). Sin embargo, es probable que los valores de {{cssxref("background-color")}} permanezcan, ya que la mayoría de los navegadores no establecen esa propiedad en los enlaces visitados de forma predeterminada.</p>

<h3 id="HTML">HTML</h3>

<pre class="brush: html">&lt;a href="#ordinary-target"&gt;Este es un enlace ordinario.&lt;/a&gt;&lt;br&gt;
&lt;a href=""&gt;Ya has visitado este enlace.&lt;/a&gt;&lt;br&gt;
&lt;a&gt;Enlace de marcador de posición (no se personalizará)&lt;/a&gt;
</pre>

<h3 id="CSS">CSS</h3>

<pre class="brush: css">a:link {
  background-color: gold;
  color: green;
}
</pre>

<h3 id="Resultado">Resultado</h3>

<p>{{EmbedLiveSample("Ejemplos")}}</p>

<h2 id="Especificaciones">Especificaciones</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Especificación</th>
   <th scope="col">Estado</th>
   <th scope="col">Comentarios</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{ SpecName('HTML WHATWG', 'scripting.html#selector-link', ':link') }}</td>
   <td>{{ Spec2('HTML WHATWG') }}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{ SpecName('CSS4 Selectors', '#link', ':link') }}</td>
   <td>{{ Spec2('CSS4 Selectors') }}</td>
   <td>Ningún cambio.</td>
  </tr>
  <tr>
   <td>{{ SpecName('CSS3 Selectors', '#link', ':link') }}</td>
   <td>{{ Spec2('CSS3 Selectors') }}</td>
   <td>Ningún cambio.</td>
  </tr>
  <tr>
   <td>{{ SpecName('CSS2.1', 'selector.html#link-pseudo-classes', ':link') }}</td>
   <td>{{ Spec2('CSS2.1') }}</td>
   <td>Elevar la restricción para aplicarla únicamente al elemento {{ HTMLElement("a") }}.</td>
  </tr>
  <tr>
   <td>{{ SpecName('CSS1', '#anchor-pseudo-classes', ':link') }}</td>
   <td>{{ Spec2('CSS1') }}</td>
   <td>Definición Inicial.</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad con navegadores</h2>

<div>


<p>{{Compat("css.selectors.link")}}</p>
</div>

<h2 id="Ver_también">Ver también</h2>

<ul>
 <li>Pseudo-clases relacionadas con enlaces: {{ cssxref(":visited") }}, {{ cssxref(":hover") }}, {{ cssxref(":active") }}</li>
</ul>