La pseudo-class :target en CSS para resaltar contenido vinculado mediante enlaces

La pseudo-class :target en CSS es una de esas herramientas que pasan desapercibidas hasta que la necesitas… y entonces te das cuenta de lo potente que puede ser. Permite aplicar estilos a un elemento HTML cuando su id coincide con el fragmento (#) de la URL, lo que abre la puerta a crear estados visuales, resaltar secciones o incluso construir pequeños patrones de interacción sin necesidad de JavaScript.

En esta entrada voy a explicar qué es la pseudo-class o selector :target, cómo funciona realmente y cómo la he usado en la práctica con ejemplos claros y aplicables para emplearlos en nuestros diseños web.

Antes vimos como usar la pseudo-class :empty en CSS para seleccionar elementos sin contenido.

¿Qué es la pseudo-class :target en CSS?

La pseudo-class :target selecciona el elemento cuyo atributo id coincide con el fragmento de la URL actual. Ese fragmento es la parte que aparece después del carácter #.

Dicho de otra forma: cuando navegas a una URL como pagina.html#seccion, el elemento con id="seccion" pasa automáticamente al estado :target.

Esto convierte al propio navegador en un “gestor de estados” muy básico, pero sorprendentemente útil.

Este selector o pseudo-class es empleado para seleccionar o dar estilo a un único elemento cuyo id coincida en alguno de los elementos HTML; en otras palabras el selector :target es empleado para dar estilo al elemento HTML actualmente activado.

Las URLs precedidas por el carácter # seguido de un identificador, permite enlazar elementos dentro del documento HTML; veamos un ejemplo.

¿Cómo funciona :target con el fragmento de la URL (#)?

Si quisiéramos enlazar el siguiente elemento a través de un enlace:

<h2 id="cuatro">Ejemplo cuatro</h2>

Tendríamos que crear un enlace como el siguiente:

<a href="#cuatro"">Empleando la pseudo-class :target para aplicar un overlay</a>

En donde el texto siguiente al carácter #, corresponde al identificador del elemento.

Cuando el usuario hace clic, el navegador:

• Actualiza la URL añadiendo #cuatro
• Hace scroll hasta el elemento
• Activa la pseudo-class :target sobre ese elemento

Y desde CSS puedes reaccionar a ese estado:

#cuatro:target {
 background: yellow;
}

En la práctica, esto es ideal para resaltar visualmente la sección a la que acaba de llegar el usuario, algo que he usado muchas veces en documentos largos y FAQs.

Sintaxis básica del selector :target

La sintaxis no tiene ningún misterio:

elemento:target {
 /* estilos */
}

O combinándolo con clases:

.parte:target {
 border: 2px solid red;
}

Ejemplo mínimo con HTML y CSS

.parte:target {
 border: 2px solid #f00;
}

Este tipo de regla es tan simple que, cuando lo probé por primera vez, me sorprendió lo fácil que era conseguir un efecto visual claro sin escribir ni una línea de JavaScript.

Qué ocurre cuando hay varios enlaces y un solo :target

Solo puede haber un :target activo a la vez, porque solo puede haber un fragmento en la URL. Esto es una limitación importante… pero también una pista de cómo debe usarse: :target está pensado para estados exclusivos, no múltiples selecciones.

La pseudo-class :target en la práctica

La pseudo-class :target es muy útil cuando realizamos clics en los enlaces para activar las secciones en un documento; indicar la sección seleccionada de una manera más visual para atraer la atención del usuario hacia un área de interés; de clics en los siguientes enlaces:

 En el ejemplo anterior estamos creando una región de interés a través de la propiedad border según el elemento activado a través del enlace clickeado por el usuario.

 El CSS del ejemplo anterior es el siguiente:

.parte:target {
	border: 2px solid #F00;
}

Realmente sencillo y no requiere alguna explicación extra; en cuanto al HTML se divide en dos bloques:

El menú que referencia cada uno de los bloques de textos en el documento:

 <nav>
     <ul>
         <li><a href="#parte1">Parte 1</a></li>
         <li><a href="#parte2">Parte 2</a></li>
         <li><a href="#parte3">Parte 3</a></li>
         <li><a href="#parte4">Parte 4</a></li>
     </ul>
 </nav>

 Y los bloques de texto del documento:

   <div id="parte1" class="parte">
       <span><a href="">X</a>
           <h1>Parte 1</h1>
           <p>Esto es un monto de texto sin sentido que tiene la finalidad
               de llenar espacio para mostrar un contenido.</p>
           ...
       </span>
   </div>
   <div id="parte2" class="parte">
       <span><a href="">X</a>
           <h1>Parte 2</h1>
           <p>Esto es un monto de texto sin sentido que tiene la finalidad
               de llenar espacio para mostrar un contenido.</p>
           ...
       </span>
   </div>
   <div id="parte3" class="parte">
       <span><a href="">X</a>
           <h1>Parte 3</h1>
           <p>Esto es un monto de texto sin sentido que tiene la finalidad
               de llenar espacio para mostrar un contenido.</p>
           ...
       </span>
   </div>
   <div id="parte4" class="parte">
       <span><a href="">X</a>
           <h1>Parte 4</h1>
           <p>Esto es un monto de texto sin sentido que tiene la finalidad
               de llenar espacio para mostrar un contenido.</p>
           ...
       </span>
   </div>

 El HTML mostrado anteriormente no tendrá variación alguna en los experimentos (exceptuando el último) presentados en esta entrada.

La pseudo-class :target y las animaciones

Podemos emplear las animaciones en CSS para crear cambios más sutiles y no persistentes en el tiempo:

 Especificamos la propiedad de la animación:

	.parte:target {
		    animation: brillar 1s ease-out;
	}

 Las propiedades definidas en el @keyframes simplemente cambian el color de fondo:

	@keyframes brillar {
	    0% { background-color: rgba(255,0,0,0.2); }
	    100% { background-color: #FFFFFF; }
	}

:target y animaciones en CSS

.parte:target {
 animation: brillar 1s ease-out;
}
@keyframes brillar {
 0% { background-color: rgba(255, 0, 0, 0.2); }
 100% { background-color: #fff; }
}

Aplicar animaciones con @keyframes

Este patrón me ha funcionado muy bien para llamar la atención sin que el efecto sea persistente. El usuario nota el cambio, pero el diseño vuelve a la normalidad.

• Efectos visuales no persistentes
  • A diferencia de otros estados, la animación se ejecuta solo al activarse :target, lo que la hace perfecta para destellos informativos.
• Cuándo usar animaciones con :target
  • Para destacar secciones enlazadas
  • Para indicar contexto tras un salto
  • Como mejora progresiva

La pseudo-class :target y las transiciones

 En este tercer ejemplo veremos cómo emplear el selector en conjunto con las transiciones en CSS; por defecto ocultaremos todos los bloques de contenidos a través de la propiedad opacity establecida en cero:

.parte {
/*otras reglas*/
opacity: 0;
	transition: opacity 1s;
}

 Al dar clic sobre un enlace mostraremos el bloque de contenido progresivamente empleando la siguiente regla que aumenta la opacidad del bloque activado:

.parte:target {
	opacity: 1;
}

Empleando la pseudo-class :target para aplicar un overlay

Como último ejemplo, veremos como crear un sencillo especie de modal al activar el bloque de texto:

Lo principal que debes de tener en cuenta de este experimento que podrás ver a continuación:

Es que sobrescribimos por completo el comportamiento del bloque de texto activado; es decir, se altera su posición con respecto al resto del documento con la propiedad position y así como el tamaño del mismo que se configura para que ocupe el 100% de la pantalla:

.parte:target {
	background: rgba(0, 0, 0, 0.5);
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 5px;
	box-shadow: 0 0 15px #666;
}

Y el contenido a mostrar embebida dentro del elemento span se ubica en el medio de la pantalla:

.parte:target span {
	background: #FFF;
	padding: 10px;
	margin: 20% auto 0 auto;
	display: block;
	width: 50%;
	height: auto;
}

Las demás reglas son de fácil comprensión y permiten definir una mayor estética al experimento.

Destacar visualmente el elemento activo

Un ejemplo sencillo que suelo usar como punto de partida es este:

.parte:target {
 border: 2px solid #f00;
}

Es directo, claro y cumple su función: decirle al usuario “estás aquí”.

Uso de border, background y box-shadow

Las propiedades más habituales para :target son:

• border
• background-color
• box-shadow
• pequeñas transformaciones (transform)

No conviene exagerar: en mi experiencia, los efectos sutiles funcionan mejor que los cambios agresivos.

:target y transiciones CSS

En otro experimento decidí ocultar inicialmente todos los bloques:

.parte {
 opacity: 0;
 transition: opacity 1s;
}

Y luego mostrar solo el bloque activo:

.parte:target {
 opacity: 1;
}

Mostrar contenido progresivamente con opacity

Este enfoque es ideal para interfaces sencillas donde quieres revelar contenido de forma progresiva.

Buenas prácticas para guiar la atención del usuario

Algo que aprendí rápido es que :target no debería “romper” el diseño. Es mejor usarlo como refuerzo visual temporal, no como un cambio permanente de layout.

Diferencias entre animaciones y transiciones

• Animaciones: control total del efecto
• Transiciones: simples y más predecibles
• Ambas funcionan bien con :target, dependiendo del resultado que busques.
• Errores comunes al usar transiciones con :target

El error más común es intentar usar display: none, lo cual rompe la transición. opacity suele ser una mejor opción.

Crear un overlay o modal usando :target

Este es, probablemente, el uso más llamativo.

.parte:target {
 background: rgba(0, 0, 0, 0.5);
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
}

Sobrescribiendo el flujo del documento con position: fixed

Aquí sobrescribimos completamente el comportamiento normal del bloque, sacándolo del flujo del documento.

Centrar contenido en pantalla

.parte:target span {
 background: #fff;
 padding: 10px;
 margin: 20% auto 0;
 display: block;
 width: 50%;
}

Este patrón es simple, pero funciona sorprendentemente bien para modales básicos.

Casos de uso reales de :target en CSS

Resaltar secciones enlazadas dentro de un documento

Uno de los usos más comunes (y más efectivos) es resaltar la sección a la que apunta un enlace interno. En documentos largos, esto ayuda muchísimo a no perder el contexto tras el salto de página.

En más de una ocasión he usado :target simplemente para añadir un borde o un fondo temporal que guíe la vista del usuario justo después del clic.

Navegación interna y menús por anclas

Un patrón muy típico es combinar un menú con enlaces internos:

<nav>
 <ul>
   <li><a href="#parte1">Parte 1</a></li>
   <li><a href="#parte2">Parte 2</a></li>
   <li><a href="#parte3">Parte 3</a></li>
   <li><a href="#parte4">Parte 4</a></li>
 </ul>
</nav>

Cada enlace activa su sección correspondiente, y desde CSS puedes dejar claro cuál es la parte activa en cada momento.

Mostrar y ocultar contenido sin JavaScript

Aunque no sustituye a un sistema completo de estados, :target funciona sorprendentemente bien para:

• desplegables simples
• secciones condicionales
• ejemplos interactivos

Siempre que aceptes sus reglas del juego.

Limitaciones de este enfoque

No es un reemplazo de un modal completo:

• no gestiona foco
• depende del historial
• tiene efectos de scroll

Pero para prototipos o soluciones rápidas, cumple su función.

Ventajas y desventajas de usar :target

Cuándo :target es una buena opción

Yo suelo usarlo cuando:

• Necesito un estado simple.
• Rl salto de scroll es aceptable.
• No quiero añadir JavaScript.

Problemas de scroll y salto de página

El comportamiento de salto es parte del contrato de :target. A veces es útil, otras no tanto. Ignorarlo suele llevar a resultados confusos.

Impacto en el historial del navegador

Cada cambio de :target afecta a la URL, y por tanto al historial. Esto puede ser una ventaja… o un problema, según el caso.

:target frente a otras pseudoclases CSS

• Diferencias entre :target, :hover y :focus
  • :hover: interacción puntual
  • :focus: accesibilidad y teclado
  • :target: estado basado en la URL

Son herramientas distintas, no intercambiables.

Cuándo elegir :target y cuándo no

Si necesitas múltiples estados simultáneos o control fino, :target no es la mejor opción. Pero para estados únicos, sigue siendo una solución elegante.

Compatibilidad con navegadores y accesibilidad

• Soporte en navegadores modernos
  • :target está soportada desde hace años en todos los navegadores modernos, lo que la hace muy segura a nivel de compatibilidad.
• Consideraciones de accesibilidad
  • Nunca dependas solo del color para indicar estado. Combina cambios visuales con estructura clara y contenido comprensible.

Preguntas frecuentes sobre la pseudo-class :target

• ¿Se puede usar :target sin enlaces?
  • No. Necesita un fragmento en la URL.
• ¿Puedo tener varios :target activos?
  • No, solo uno a la vez.
• ¿Es una alternativa a JavaScript?
  • No del todo, pero puede evitarlo en casos simples.

Conclusión

La pseudo-class :target en CSS es una herramienta sencilla, pero muy poderosa cuando se usa con criterio. En mi experiencia, funciona mejor como mejora progresiva y como solución ligera para estados únicos. No sustituye a JavaScript, pero en muchos casos permite hacer más con menos.

Si sabes cuándo usarla (y cuándo no), :target puede convertirse en una aliada muy útil en tus diseños web.

Como experimento más avanzado, crea un carrusel o slider 3D con HTML5 y CSS.