BaselineLab
0Apoyar

Enlaces, acciones y foco

Compara enlaces, puntero, teclado, foco descendiente, fragmentos y contexto de consulta con estados reales del navegador.

Leer la guía

Preguntar a la IA

Enlaces, acciones y foco

Respuesta generada con openai/gpt-5.4-nano. La IA puede cometer errores. Revisa siempre el resultado.
Selector actuala:any-link
Soporte sin confirmarEspecificidad—

Preparando el escenario y sus resultados…

Coincide con enlaces que tienen href, visitados o no.

Preview del selector

HTML
<nav class="link-list" aria-label="Comparación de enlaces">
  <a href="" data-visited-demo>Esta página ya visitada</a>
  <a href="#guide">Guía del lab</a>
  <a>Enlace sin href</a>
</nav>
CSS
a:any-link {
  outline: 3px solid #f97316;
  outline-offset: 3px;
  background-color: color-mix(in oklch, #f97316 16%, transparent);
}

Guía educativa de selectores de enlaces, acciones y foco

Estados reales, contexto y privacidad

Distingue qué depende del historial, del dispositivo de entrada, del foco o de la URL.

Volver al playground

Modelo mental

Estos selectores observan estado del navegador; no conviene simularlo como un valor persistente.

LVHA

Orden de reglas de enlace

Con igual especificidad, declara :link, :visited, :hover y :active en ese orden para que la cascada preserve el estado esperado.

:focus-visible

Foco y modalidad de entrada

:focus indica foco; :focus-visible aplica la heurística del navegador para mostrar un indicador, especialmente al navegar con teclado.

:visited

El historial no es una API

:visited restringe propiedades y oculta sus coincidencias a JavaScript para impedir inferir el historial.

Acciones y foco

Prueba puntero, pulsación y navegación por teclado sobre controles nativos.

:hover

Elementos señalados por un dispositivo apuntador.

Especificidad(0, 1, 0)
Comportamiento
  • El estado cambia con el puntero real.
  • En pantallas táctiles puede ser breve, ausente o persistente.
Ejemplos
SelectorEspecificidad(0, 1, 1)
button:hover
HTML
Coincide: <button>Save</button>
Errores frecuentes
  • No ocultes contenido esencial hasta hover.
  • No equivale a foco.
Leer la definición completaAbre en una pestaña nueva

:active

Elementos durante su activación.

Especificidad(0, 1, 0)
Comportamiento
  • Suele durar mientras se mantiene la pulsación.
  • Puede aplicarse a botones y enlaces.
Ejemplos
SelectorEspecificidad(0, 1, 1)
button:active
HTML
Coincide: <button>Save</button>
Errores frecuentes
  • No significa la página actual.
  • Su posición en la cascada importa.
Leer la definición completaAbre en una pestaña nueva

:focus

El elemento que tiene foco.

Especificidad(0, 1, 0)
Comportamiento
  • Puede originarse mediante puntero, teclado o script.
  • Solo un elemento del documento suele tener foco a la vez.
Ejemplos
SelectorEspecificidad(0, 1, 1)
input:focus
HTML
Coincide: <input aria-label="Search" />
Errores frecuentes
  • No elimines el indicador sin reemplazo visible.
  • No selecciona automáticamente al contenedor.
Leer la definición completaAbre en una pestaña nueva

:focus-visible

El elemento enfocado cuando el navegador decide mostrar indicación.

Especificidad(0, 1, 0)
Comportamiento
  • La modalidad de teclado suele activar la indicación.
  • La heurística pertenece al navegador.
Ejemplos
SelectorEspecificidad(0, 1, 1)
button:focus-visible
HTML
Coincide: <button>Continue</button>
Errores frecuentes
  • No es simplemente focus tras pulsar Tab.
  • No fuerces una simulación que contradiga la heurística.
Soporte y compatibilidad

Consulta el estado Baseline específico de :focus-visible.

Leer la definición completaAbre en una pestaña nueva

:focus-within

Un elemento si él o un descendiente tiene foco.

Especificidad(0, 1, 0)
Comportamiento
  • Permite resaltar grupos completos.
  • Incluye descendientes en árboles shadow según la definición.
Ejemplos
SelectorEspecificidad(0, 1, 1)
label:focus-within
HTML
Coincide: <label>Search
  <input />
</label>
Errores frecuentes
  • El sujeto es el contenedor, no el control.
  • No sustituye el estilo de foco del control.
Soporte y compatibilidad

Consulta el estado Baseline específico de :focus-within.

Leer la definición completaAbre en una pestaña nueva

URL y ámbito

Relaciona el fragmento activo y la raíz desde la que se evalúa una consulta.

:target

El elemento cuyo id coincide con el fragmento de la URL.

Especificidad(0, 1, 0)
Comportamiento
  • Cambia cuando cambia el hash.
  • Puede no haber ningún destino.
Ejemplos
SelectorEspecificidad(1, 1, 0)
#details:target
HTML
<a href="#details">Open</a>
Coincide: <section id="details">Details</section>
Errores frecuentes
  • No es un estado elegido libremente por CSS.
  • El fragmento también afecta a navegación y scroll.
Leer la definición completaAbre en una pestaña nueva

:scope

La raíz contextual de una consulta o regla con ámbito.

Especificidad(0, 1, 0)
Comportamiento
  • En querySelector() representa el elemento desde el que se consulta.
  • Permite exigir hijos directos de esa raíz.
Ejemplos
SelectorEspecificidad(0, 1, 1)
:scope > article
HTML
<section><!-- query root -->
Coincide:   <article>Direct</article>
  <div><article>Nested</article></div>
</section>
Errores frecuentes
  • No equivale siempre a :root.
  • Su sujeto depende del contexto de evaluación.
Soporte y compatibilidad

Consulta el estado Baseline de :scope en APIs de selectores.

Leer la definición completaAbre en una pestaña nueva