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

- Andrés Cruz

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

En esta entrada veremos cómo podemos emplear la pseudo-class o selector :target en nuestros diseños web; esta pseudo-class es otra de las muchas pseudo-classes CSS que existen y algunas de ellas que hemos visto:

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:

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 caracter #, corresponde al identificador del elemento.

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; }
	}

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:

selector target en CsS - ejemplo 4

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

Es que sobreescribimos 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.

Andrés Cruz

Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz En Udemy

Acepto recibir anuncios de interes sobre este Blog.