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.

Pestaña

Pestaña

Pestaña

Al pulsar uno de los botones (con link a "#nombre") aparecerá el elemento que tenga en su ID también "nombre", gracias a la propiedad de CSS :target.

Al pulsar uno de los botones (con link a "#nombre") aparecerá el elemento que tenga en su ID también "nombre", gracias a la propiedad de CSS :target.

Al pulsar uno de los botones (con link a "#nombre") aparecerá el elemento que tenga en su ID también "nombre", gracias a la propiedad de CSS :target.

Cerrar

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>

via Pedro Gutiérrez [Xitrus - RSS] http://xitrus.es/blog/81/Uso_de_la_pseudo-clase_target