Les sélecteurs en rapport avec le signet de l'url (target)
Résumé des caractéristiques du sélecteur :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'appelleScroll to textet n'est pas encore prise en charge par tous les navigateurs (2022).
Mettre en évidence la cible avec :target.
Après avoir cliqué sur CE LIEN (a href="#exemple1"), 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="#exemple2"), 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="#exemple3") 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 (2022).
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 navigateurs avec ces pseudo-classes.
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 (2022).
targettarget-texttarget-withinNavigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
Opéra
Opéra Mobile
Safari
Safari sur IOS
Samsung Internet
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: Pseudo-classe désignant l'élément dont l'id figure dans l'url (signet).:target-within: Pseudo-classe désignant l'élément contenant l'élément dont l'id figure dans l'url.:visited: Pseudo classe désignant les liens hypertexte déjà visités.