: cible - Astuces CSS | CSS Almanach 2025

Le :targetpseudo-sélecteur dans CSS correspond lorsque le hachage dans l'URL et l'ID d'un élément sont identiques. Par exemple, si l'URL actuelle est:

https://css-tricks.com/#voters

Et cela existait dans le HTML:

 Content

Ce sélecteur correspondrait:

:target ( background: yellow; )

Et cet sectionélément aurait un fond jaune.

Avec ce générique d'un sélecteur (correspondant à tout ce qui se trouve être la cible), si l'URL changeait pour se terminer #faqet qu'il y avait un autre élément avec un ID de faq, ce sélecteur correspondrait à nouveau et l' #faqélément aurait un arrière-plan jaune.

Vous pouvez le limiter en précisant les éléments que vous souhaitez cibler, comme

#voters:target ( )

Quand utiliseriez-vous cela?

Une possibilité est lorsque vous voulez du style avec des «états». Lorsque la page a un certain hachage, elle est dans cet état. Ce n'est pas aussi polyvalent que la manipulation des noms de classes (car il ne peut y en avoir qu'un et il ne peut être lié qu'à un élément) mais c'est similaire. Tout ce que vous pouvez faire en changeant une classe pour changer d'état, vous pouvez le faire lorsque l'élément est dans :target. Par exemple: changer les couleurs, changer la position, changer les images, cacher / montrer des choses, peu importe.

J'utiliserais ces règles empiriques pour savoir quand :targetest un bon choix:

Lorsqu'un «état» est nécessaire
Quand le comportement jump-down / hash-link est acceptable
Quand il est acceptable d'affecter l'historique du navigateur

Comment obtenir des hachages dans les URL?

Le moyen le plus courant consiste à cliquer sur un lien contenant un hachage par un utilisateur. Il peut s'agir d'un lien interne (de même page) ou d'une URL complète qui se termine par un hachage et une valeur. Exemples:

Go To There Go To There

Comportement de saut

Que ce soit un lien de même page ou non, le comportement du navigateur est de faire défiler la page jusqu'à ce que cet élément soit en haut de la page . Ou, dans la mesure du possible, s'il ne peut pas faire défiler aussi loin. C'est assez important à savoir, car cela signifie que l'exploitation de ce comportement «déclaré» est un peu délicate / limitée.

Par exemple, j'ai essayé une fois une variété de techniques pour répliquer des onglets CSS fonctionnels, mais j'ai finalement décidé d'utiliser le hack de case à cocher était une meilleure idée car cela évite les problèmes de saut de page. Ian Hansson de CSS Science a également quelques exemples d'onglets. Son troisième exemple utilise des :targetéléments absolument positionnés cachés au-dessus du haut de la page pour empêcher le comportement de saut de page. C'est intelligent, mais une solution globale parfaite, car cela signifierait que la page sauterait vers le haut si les onglets étaient plus bas sur une page.

Plus d'information

Article ici sur CSS-Tricks: On: target
Spéc. De niveau 4 des sélecteurs
Une simple galerie d'images utilisant: target (souffre du saut de page, bon exemple de cela) par Chris Heilmann
Démonstration de la technique de fondu jaune (bien que pour le contenu existant, pas le contenu nouvellement ajouté) à partir de Web Designer Notebook
Une cible CSS, littéralement, par Caleb Ogden.
CSS: cible pour les conceptions hors écran
Documents MDN