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:

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.