Créer une galerie d'images avec :target

L'un des nouveaux sélecteurs du CSS3 est la pseudo-classe :target, qui peut être utilisée pour appliquer des règles à un élément ayant un identifiant spécifique, que ce soit une ancre ou un id.

Par exemple, supposons que vous ayez un titre de section avec pour id 'chapitre_2' :

<h3 id="chapitre_2">Le titre du chapitre 2</h3>

Vous pouvez créer un lien direct vers cet élément en utilisant son identifiant à la fin de l'adresse URL :

http://www.exemple.com/index.html#chapitre_2

Ensuite, avec le sélecteur :target, vous pouvez appliquer un background à cet élément pour indiquer clairement où vous êtes arrivé sur la page :

h3:target { background-color: #ffffff; }

Vraiment utile, vous ne trouvez pas ? Ce n'est pas une fonction puissante, mais néanmoins utile. elle peut se rendre encore plus utile avec un peu d'ingéniosité, que diriez vous, par exemple, d'une galerie d'images 100% CSS ?

Regardez cet exemple (avec un navigateur supportant :target ; Mozilla Firefox, Webkit ou Opera feront l'affaire). En cliquant sur les liens, vous naviguez entre les différentes images, tout ceci en un minimum de code et sans JavaScript ni PHP.

La première étape est la création d'une liste d'images et leurs noms, ceux-ci étant des liens. Par exemple :

<li id="one">
	<p><a href="#one">Image 1</a></p>
	<img src="../images/one.jpg">
</li>

Chaque élément de la liste a besoin d'un id, cela permettra l'utilisation d'une ancre, le lien href pointe vers l'id du li qui le contient. Cela permet à :target de fonctionner, c'est magique ! Toutes les images sont positionnées les unes par dessus les autres. En utilisant le sélecteur, nous changeons uniquement la valeur de la propriété z-index, et l'image cible se positionne au-dessus des autres images :

img { position: absolute; }
li:target img { z-index: 100; }

Facile ! Bien sûr, ceci est un exemple très basique, avec plus d'ingéniosité cela pourrait devenir un outil très utile.

Mise à jour : je viens de me rendre compte que Daniel Glazman a proposé un exemple assez similaire juste avant moi, voir CSS-only tabs.

Je tiens à remercier ordiminnie dont la relecture attentive a permis d'améliorer significativement la qualité de cet article.