21

2

Uso de la pseudo-clase target

CSS3 trajo muchos selectores nuevos, entre ellos está :target, que es una pseudo-clase de CSS que se activa cuando el target de un elemento está activo, es decir, desde un link hemos ido a una parte concreta del texto (en una etiqueta <a> hemos establecido un enlace como este: "#texto").
Esta pseudo-clase se activa al pulsar un link y no se desactiva hasta pulsar otro, por lo que nos puede servir para crear menús, pestañas y más cosas impresionantes con solo CSS.

En el ejemplo hay tres links, que llevan a "textoN" (del 1 al 3, como podemos ver en la URL al pulsar uno de ellos) y ese mismo nombre es el que aparece en la ID de cada uno de los bloques de texto.
Con este pequeño ejemplo hemos visto como funciona :target, ahora os voy a enseñar como ponerlo en funcionamiento.

1. <!-- Al pulsar el link se activa el :target del DIV -->
2. <a href="#texto">Pestaña</a>
3. <div id="texto">Bloque con el texto</a>

La pseudo-clase :target se usa como si de cualquier otra clase se tratara, no hace falta que acompañe ningún elemento (no es como los selectores como "[href=...]", por ejemplo) y se usa de la siguiente forma.

1. /* El bloque de texto está oculto */
2. #texto{

height:0px;

3. }
5. /* Al activarse :target */
6. :target{

height:100px;

7. }
8. /* También se puede usar de esta forma */
9. #texto:target{

height:100px;

10. }

Exaltar bloques de texto

La función de ir a un punto específico de la página con un link tiene como fin el poder ir directamente a un texto incluso recargando la página (este sería su uso normal), por lo que nos puede ser de utilidad para resaltar el párrafo al que nos dirigimos, por ejemplo.

El funcionamiento es exactamente igual al del anterior ejemplo.

El funcionamiento es simple, el parráfo al que iremos se distingue de los demás, lo que puede ayudar a ver que es lo importante de la página

Exaltar títulos

Por poner otro ejemplo, el uso del desplazamiento a través de los links es usado en distintas wikis (como Wikipedia), y se podría hacer más llamativo a que parte se ha saltado haciendo una señal en el título que acompaña a un párrafo.

Resumen

Esta pseudo-clase es bastante curiosa y útil si la usamos correctamente, recalco que el primer ejemplo es más bien para tener un concepto del funcionamiento, pero no sería muy cómodo usarlo habitualmente por el salto que hace, pero resaltar un párrafo o un título cuando realizamos un salto podría ser útil para situar al lector al punto donde está lo que busca.