Entre las nuevas funciones de CSS3 siempre se llevan la atención las animaciones o las transiciones y, a veces, ciertas opciones pasan desapercibidas. Es el caso del pseudoselector :target, simple pero muy útil en ciertos casos.

¿Para qué sirve target?

Puedes verlo en acción en esta demo.

Target es un pseudoselector, por lo que es “de la familia” de :hover, :focus o :selected, que se aplican a un elemento sólo en un determinado contexto. En el caso de :target, sus estilos dependen de que el hash de la URL (lo que va después de la almohadilla #) coincida con el ID del elemento al que se aplica el pseudoselector.

Si tenemos este código HTML:

<section id="section1">
            <h1>Esta es la primera sección</h1>
        </section>

Y hacemos que la URL de la página sea http://ejemplo.com/#section1 (ya sea escribiéndola nosotros o pulsando un enlace), podremos aplicar target:

section:target {
        background: yellow;
    }

Aplicaciones prácticas

Probablemente no uses este selector con mucha frecuencia pero, en ciertas ocasiones, puede ser muy útil. Por ejemplo, en páginas de FAQ o similares, donde se suele enlazar a diferentes puntos de la propia página, se puede resaltar de forma más clara la parte exacta en la que se tiene que fijar el usuario.

En mi ejemplo uso una pequeña animación (no funciona en IE<10):

@-webkit-keyframes blink {
        from { background: #DDD031; }
        to { background: transparent; }
    }
    @-o-keyframes blink {
        from { background: #DDD031; }
        to { background: transparent; }
    }
    @-moz-keyframes blink {
        from { background: #DDD031; }
        to { background: transparent; }
    }
    @keyframes blink {
        from { background: #DDD031; }
        to { background: transparent; }
    }
    section:target {
        -webkit-animation: blink 4s 1;
        -o-animation: blink 4s 1;
        animation: blink 4s 1;
    }

Una forma muy fácil de mejorar la experiencia de usuario.

En diseños de página única, también puede ser muy útil. Con un poco de creatividad, hasta se puede crear una galería de fotos: http://thewebrocks.com/demos/targetgallery/