Selector target en css 3

Una de las novedades que nos ha aportado CSS3 son sus nuevos selectores, uno de ellos es el selector “:target”, su traducción al ingles seria “objetivo” o “blanco”, este nuevo selector aplica los estilos de un elemento cuando se accede al “blanco” o al “objetivo”, o tambien podemos llamarlo “destino”, para ello debemos usar un ancla, lo que habitualmente hacemos para crear un enlace a cierta parte de un documento, es mas sencillo de entender en la práctica que de explicar la teoria, asi que iremos directamente a los ejemplos.

Habitualmente para crear un enlace a cierta parte del documento creamos un “ancla”, para ello el valor del atributo “href” de un elemento “a” deberá ir precedido con el caracter “#” y seguidamente el nombre del identificador del elemento al que queremos enlazar.

Ejemplo

<a href="#ancla">Enlace</a>
<div id="ancla">Destino</div>

El selector “:target” entrará en acción cuando pulsemos en el enlace para que este nos lleve hasta el destino.

Veamos un ejemplo, vamos a trabajar con el cógigo del HTML anterior, y vamos a crear una hoja de estilos, lo mas importante es tener claro la sintaxis, como el ID del elemento al que enlazamos es “ancla”, creamos el código CSS de la siguiente forma:

#ancla:target {}

A partir de aquí podemos añadir las propiedades CSS que queramos aplicar al elemento, por ejemplo, si aplicamos al código la propiedad “color” con el valor “red”, el elemento destino tomará el valor “red”, veamos un ejemplo a continuación, al pulsar el enlace, este también nos llevará al destino, la página se posicionará para colocar el destino como el primer elemento.

Ejemplo

Enlace

Si te fijas en la barra de direcciones del navegador, a la url se le ha añadido el destino al que hemos accedido

Selector :target – CSS3

Este selector nos permite un gran abanico de posibilidades, como por ejemplo crear un Lightbox para una galeria de imágenes sin necesidad de usar Javascript, si os interesa saber como, os invito a visitar el artículo Crear un Lightbox con CSS3, en el que vemos paso a paso la construcción de un Lighbox sin usar Javascript, solo con HTML5 y CSS3.