Les sélecteurs en rapport avec le signet de l'url (target)

Les sélecteurs avec target.

On sait qu'il est possible d'établir un lien vers un emplacement précis d'une page, en insérant dans l'url, après le nom de la page, le caractères # suivi de l'id d'un élément présent sur la page. Exemple :

https://www.domaine.fr/.../page.htm#conclusion

Ce signet doit correspondre à l'identifiant d'un des éléments de la page. Lorsqu'un signet est présent dans l'adresse, le navigateur affiche la page en effectuant un défilement jusqu'à l'élément concerné, plutôt que d'afficher la page à son début.
Le signet permet donc d'établir un lien vers une partie précise de la page.

Nous présentons sur cette page plusieurs sélecteurs (pseudo-classes ou pseudo-éléments) qui font référence à l'élément désigné par le signet de l'url. Les liens ci-dessous vous permettent d'accéder aux explications pour chacun des sélecteurs, et sont également une démonstration du fonctionnement de ces sélecteurs, chacun des liens ajoutant un signet à l'adresse de la page.

• :target : désigne l'élément référencé par le signet dans l'URL.
• :target-within ⚠ : désigne l'élément référencé par le signet, ainsi que tous ses descendants.
• ::target-text : désigne le texte que le navigateur doit rechercher dans le contenu de la page. Cette fonctionnalité s'appelle Scroll to text.

Mettre en évidence la cible avec :target.

Après avoir cliqué sur CE LIEN (a href="#example1"), observez l'adresse pour constater qu'il y a bien le caractère # suivi d'un signet. Observez également que cette partie de la page que vous êtes en train de lire, est maintenant sur fond bleu.

Combinaison de :target avec une animation.

En cliquant sur CE LIEN (a href="#example2"), vous ajoutez un signet à l'adresse de la page. La pseudo-classe :target permet d'afficher la partie de page correspondant au signet sur un fond bleu. Cette couleur s'estompe au bout de quelques instants.

La pseudo-classe :target-within.

Cliquez sur CE LIEN (a href="#example3") pour ajouter un signet à l'adresse de cette page, et observez le résultat sur cette partie du contenu.

Cette pseudo-classe n'est pour l'instant traitée par aucun navigateur (2025).

Le pseudo-élément ::target-text.

Cet exemple ne fonctionne que sur les navigateurs qui prennent en charge la fonctionnalité "scroll to text" (voir le tableau de compatibilité ci-dessous). Cette fonctionnalité consiste à atteindre une partie de la page en citant un extrait de texte. C'est un peu l'équivalent de la fonction rechercher classique, mais le texte à chercher est inscrit dans l'adresse de la page.

Cliquez sur LIEN 1 ou sur LIEN 2, et observez la barre d'adresse : vous noterez la présence de #:~:text= après le nom de la page. Le texte recherché est indiqué ensuite, les espaces ayant été remplacés par %20.

Caractéristiques de la fonctionnalité scroll to text :

• La recherche est insensible à la casse.
• La recherche s'effectue sur des mots complets.
• Si le texte recherché apparaît plusieurs fois sur la page, c'est la première occurrence qui est sélectionnée.
• Le tiret (signe moins) inséré dans le texte à chercher, semble poser problème (à vérifier).

Le pseudo-élément ::target-text désigne le texte recherché qui est spécifié dans l'url.
Si votre navigateur traite correctement ce pseudo-élément une portion de texte doit s'afficher en rouge sur fond jaune. Mais la prise en charge laisse encore à désirer : peu de navigateurs traitent correctement ::target-text.

Compatibilité des navigateur avec :target.

La pseudo-classe :target est bien reconnue par tous les navigateurs actuels. A l'inverse la pseudo-classe :target-within ne l'est pas aucun à l'heure actuelle (2025).

1

Pseudo-classe
target

2

Pseudo-classe
target-text

3

Pseudo-classe
target-within

Estimation de la prise en charge globale.

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Chrome

Edge

Internet Explorer

Opéra

Firefox

QQ Browser

Safari

Safari sur IOS

Androïd Brower

Chrome pour Androïd

Firefox pour Androïd

Opéra Mobile

Baidu Browser

KaiOS Browser

UC Browser pour Androïd

Samsung Internet

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Caniuse

Caniuse

Historique de la pseudo-classe :target.

• Sélecteurs - Niveau 3

  Introduction de la pseudo-classe :target.
  

  03 Août 1999

  Document de travail.

  

  13 Novembre 2001

  Candidat à la recommandation.

  

  15 Décembre 2009

  Proposé à la recommandation.

  

  29 Septembre 2011

  Recommandation.

• Sélecteurs - Niveau 4

  Introduction de la pseudo-classe :target-within.
  

  29 Septembre 2011

  Document de travail.

  

  

  

Voir aussi...

Plusieurs pseudo-classes permettent de désigner les parties de page indiquées dans l'URL (signet) ou les liens figurant sur la page. Voyez aussi les sélecteurs ci-après pour compléter votre information.

:any-link
Pseudo-classe désignant tous les liens (visités ou non).
:link
Pseudo-classe désignant les liens hypertexte non visités.
⚠
:local-link
Pseudo-class désignant les liens internes, à l'exclusion des liens pointant vers un autre domaine.
::target-text
Cible le texte de l'élément désigné par le signet de l'url.
⚠
:target-within
Pseudo-classe désignant le container parent de l'élément dont l'id figure dans l'url.
:visited
Pseudo classe désignant les liens hypertexte déjà visités.