Este documento es una traducción del tutorial "The ':target' pseudo-class" propiedad de Bert Bos publicado en el sitio de W3C.
La versión en inglés de esta especificación es la única con valor normativo y puede encontrarse en: http://www.w3.org/Style/Examples/007/target.html
(Esta página usa hojas de estilo CSS)
Normalmente, un URL apunta a una página. Pero los URL que terminan en "#loquesea" tienen como dirección de destino un elemento concreto dentro de la página. Por lo general, los navegadores intentan asegurar que el elemento de destino sea visible y, de ser posible, que quede al principio de la pantalla.
Con el selector ":target" se puede añadir un estilo concreto al elemento de destino, de modo que se destaque.
Pero eso no es todo. También se puede ocultar o mostrar elementos según sean o no el elemento de destino. A continuación hay un ejemplo: muestra un pequeño menú con cuatro items, cada uno de los cuales apunta a cierto texto. Pero al principio, el texto no aparece. Cada ítem del menú es un enlace a un elemento con un ID de destino (#item1, #item2...) y esos items sólo aparecen cuando son el destino del URL actual.
Pruebe a hacer clic en los items del menú, observando además el URL actual en la barra de dirección del navegador.
Este es el elemento que corresponde al ítem 1 del menú. No debe ser visible, a menos que el usuario haya seguido un enlace cuyo destino era explícitamente "#item1".
Si el usuario saltó al ítem 2, debería ser visible este elemento.
Este elemento es visible si el usuario hizo clic en el tercer ítem del menú. El elemento tiene un URL que se puede usar también en otros lugares. Por ejemplo, puede incluirlo en otra página web para saltar directamente a este ítem.
El modo en que funciona es el siguiente. Hay dos partes importantes: el código fuente HTML y la propiedad "display". Veamos en primer lugar el documento HTML. Tiene varios enlaces y elementos con ID correspondientes:
<p> <a href="#item1">ítem 1</a> <a href="#item2">ítem 2</a> <a href="#item3">ítem 3</a> <a href="#default">borrar</a> <div class="items"> <p id="item1">... ítem 1... <p id="item2">... ítem 2... <p id="item3">... <p id="default"><!-- por defecto, no mostrar el texto --> </div>
Las reglas de estilo comienzan ocultando todos los P dentro del DIV, pero luego deshacen eso en el caso del P que es el destino actual:
div.items p {display: none} div.items p:target {display: block}
Eso es todo. El ejemplo anterior además agrega algunos colores, márgenes, bordes, etc., de modo que se vea más como un menú. Para ver cómo está hecho, puede abrir el código fuente de esta página.
En realidad, añadimos un ":not(:target)" para asegurar que sólo los navegadores que comprenden CSS3 oculten el elemento. De modo que las reglas mejoradas son éstas:
div.items p:not(:target) {display: none} div.items p:target {display: block}
Una vez que se ha comprendido lo anterior, no resulta difícil jugar un poco y crear una interfaz con "fichas": un conjunto de reglas de estilo que no solamente muestran diferente contenido según el botón que haya sido apretado, sino que también cambian la apariencia del botón.
Veamos un ejemplo. Aquí no usamos "display: none', sino 'z-index'. Si quiere saber cómo funciona, simplemente vea el código fuente de esta página…
Esta página se basa en una idea original de Daniel Glazman. Vea la explicación en su "blog" del 9 de enero de 2003, y su demostración del 13 de enero.