Navegación interactiva con pseudoclase :target en CSS

Clase 25 de 34 • Curso de CSS Avanzado y Responsive Design

Clase anteriorSiguiente clase

Resumen

Combinando creatividad y sencillez, la pseudoclase target en CSS permite crear navegación interactiva sin usar JavaScript. Esta técnica hace posible mostrar u ocultar contenido basado exclusivamente en CSS, manteniendo una página web ligera y eficiente.

¿Qué es la pseudoclase target en CSS?

La pseudoclase :target se activa cuando un elemento específico coincide con el identificador indicado en el URL (después del numeral). Esto es lo que permite realizar navegación interna en la página, mostrando o escondiendo secciones sin necesidad de JavaScript.

¿Cómo configurar el contenido inicial?

Inicialmente, las secciones deben estar ocultas:

  • Se define una clase (por ejemplo, .sección) para el contenido que queremos ocultar.
  • Aplicamos display: none para esconder el contenido de manera predeterminada.
  • Agregamos estilos adicionales como padding, color de fondo o márgenes para mejorar el diseño.

¿De qué forma se activa el contenido con :target?

Para mostrar una sección específica cuando se accede a ella desde los enlaces o URL se utiliza la pseudoclase :target:

.sección:target {
    display: block;
}

Esto significa que cuando el URL contenga, por ejemplo, #sección1, únicamente se mostrará la sección cuyo ID coincida exactamente con ese identificador.

¿Cómo funcionan los enlaces internos con target?

Utilizando un enlace interno con la propiedad href seguida del símbolo numeral para apuntar a un ID específico:

<a href="#sección1">Sección 1</a>
<div id="sección1" class="sección">Contenido...</div>

Al hacer clic en el enlace, la URL cambia y activa la pseudoclase :target, mostrando así el contenido oculto al usuario.

¿Se puede aplicar en proyectos complejos?

Esta estrategia no se limita a ejemplos simples. Es posible usarla en sitios web con múltiples secciones y elementos interactivos, siempre manteniendo el rendimiento y ligereza que ofrece CSS frente a JavaScript.

¿Has experimentado ya con esta pseudoclase en tus proyectos web? ¡Comparte tu experiencia en los comentarios!