Pseudo-clase :target con CSS3

En esta entrada voy a comentar dos pequeños ejemplos que acabo de realizar utilizando la pseudo-clase :target de la versión de CSS 3.

Con el uso de las :pseudo-clases podremos apuntar a determinados elementos de nuestro código HTML sin la necesidad de emplear clases ni identificadores.

Podríamos decir que apuntando a elementos de nuestro código HTML con :pseudo-clases, tendremos mucha más puntería.

:Target

Utilizaré la pseudo-clase :target para moverme mediante enlaces con identificadores fragmentados dentro de una misma página.

Parte de código HTML

Línea 1ª
Línea 2ª
Línea 3ª
<h1 id="texto1">Línea de texto nº 1</h1>
<h1 id="texto2">Línea de texto nº 2</h1>
<h1 id="texto3">Línea de texto nº 3</h1>

Estilos CSS

body{
     background-color:#333;
     font-family:Verdana, Geneva, sans-serif;
     font-size:13px;
     color:#999;
}

h1:target{
	background-color:#CFF;
	color:#333;
	text-decoration:line-through;
}

a {
	font-size:10px; 
	font-weight:bold; 
	color:#fff; 
	margin:20px;
}

Resultado del ejemplo

Como podemos ver el código es muy sencillo, únicamente debemos conocer los identificadores fragmentados dentro de una misma página para poder movernos por ella.

Yo he colocado en este primer ejemplo, únicamente 3 enlaces < a> y tres etiquetas < h1> sin texto entre ellas para conseguir un efecto de cambio de foco o botón.

Ahora le voy a añadir al ejemplo texto para ver como podemos movernos por nuestra página una vez que aparecen las barras de scroll gracias a esta pseudo-clase.

Me parece un poco absurdo poner la imagen de este ejemplo, ya que debemos verlo funcionando para apreciar esto que os cuento.

Ver ejemplo

Desde aquí

Puedes descargar un archivo con el código de este ejemplo. Habrá código comentado para que puedas ir probando uno a uno.
La contraseña para descomprimir es: untitled.es

@eneakao