[Résolu] Pseudo classe ::target

Bonjour à tous

Je viens de découvrir qu'il existait une pseudo-classe ::target en CSS3
En regardant ce qui s'en dit, je comprends que c'est très bien pour faire des choses qui sont considérées comme des "astuces", par exemple simuler un menu de type Apple, mais sur le fond, je ne comprends pas du tout à quoi c'est sensé servir.

Quelqu'un peut il éclairer ma lanterne et me donner des cas concrets d'utilisation "standard" de cette pseudo-classe?

Merci

Pour moi :target va servir à cibler la...cible.

si j'ai un lien de type ancre, que je ne connais pas par avance l'ancre en question, je peux la cibler avec target. par contre j'ai lu que ça se rajouté à l'historique donc 'warning'.

JENCAL a écrit :
Pour moi :target va servir à cibler la...cible.

si j'ai un lien de type ancre, que je ne connais pas par avance l'ancre en question, je peux la cibler avec target. par contre j'ai lu que ça se rajouté à l'historique donc 'warning'.

???
Comprends pas, ça doit être mon âge avancé!!!

Tout d'abord les "ancres":
Jadis on les faisait par

<a name="toto">.....</a>.

Pour les atteindre de l'intérieur (c'est à dire faire défiler la page pour que cet endroit devienne visible) on écrivait

<a href="toto">cliquez ici</a>

Sauf que selon l'endroit où est l'ancre en question il n'est pas toujours évident de voir où ça se trouve.

Si j'ai bien compris maintenant n'importe quelle balise avec un id peut être ciblée par ce mécanisme, sans qu'on ait besoin de créer un <a name="...">
Par exemple on peut avoir

<a href="toto">cliquez ici</a>
.....
.....
.....
<div id="toto">.......................</div>

Est-ce que je comprends correctement que si on clique sur le lien ça va styler la <div>?
Et quelle est la syntaxe dans ce cas là? Est-ce que c'est

#toto{background:white;}
#toto::target{background:blue;}

Et quand est-ce que ma div toto reprend un fond blanc? Quand on clique sur un autre lien qui mène vers une autre ancre? ou bien quand on clique sur autre chose?
Tu me diras que je n'ai qu'à faire des essais...
Modifié par PapyJP (03 May 2016 - 11:03)

PapyJP a écrit :
Est-ce que je comprends correctement que si on clique sur le lien ça va styler la &lt;div&gt;?
Et quelle est la syntaxe dans ce cas là? Est-ce que c'est

#toto{background:white;}
#toto::target{background:blue;}

Et quand est-ce que ma div toto reprend un fond blanc? Quand on clique sur un autre lien qui mène vers une autre ancre? ou bien quand on clique sur autre chose?
Tu me diras que je n'ai qu'à faire des essais...

Oui, c'est l'idée, je m'étais fait un petit code test. Il te manque par contre le dièse dans le href, et la notation sera bien :

#toto:target{background:blue;} /* avec un deux-points et pas deux */

La div reprendra son fond blanc au clic sur un autre lien dans mon exemple (j'ai testé, même un appui sur un bouton ne fait pas lâcher le truc )

Hello,

Pour l'histoire des ancres, tu as tout à fait raison, à un détail près : si ton lien cible un identifiant, tu dois écrire

href="#toto"

Pour être plus précis sur ::target, il s'agit de l'élément dont l'identifiant correspond au « hash » actuel de l'URL (par exemple : mon-site.com/ma-page#mon-ancre). C'est pour ça que cliquer sur un bouton ne fait rien, comme le signale SolidSnake.

Ainsi en effet, pour que ta div#toto reprenne son fond blanc, il faut que l'URL ne contienne plus #toto (soit en allant sur une autre ancre, soit en revenant sur la page sans ancre, généralement avec le bouton « Précédent »). Cliquer ailleurs sur la page ne fera rien si le hash dans l'URL ne change pas.

Concernant l'usage, c'est très intéressant pour signaler le déplacement du focus par exemple. Tu peux en trouver un bon exemple dans cet article en anglais concernant des notes de bas de page accessibles. Quand tu atterris sur une note, un fond jaune apparait.

Il faut avouer que les cas d'usages vraiment pertinents sont plutôt rares
Modifié par Ten (03 May 2016 - 11:18)

Hello,

Petit détail important : "::target" n'existe pas (ce serait un pseudo-élément), tandis que ":target" existe (c'est une pseudo-classe).

Si tu veux observer :target dans son milieu naturel, je t'invite à faire un tour sur Wikipedia et y trouver un article qui propose des notes de bas de page.

En cliquant sur une note de bas de page, tu remarqueras que : non seulement ton ancre se positionne sur la note en bas, mais en plus elle sera mise en exergue (sur fond bleu), tout simplement parce que les styles disent quelque chose comme "li:target {background: ...}"

Si tu veux l'observer en milieu plus hostile, le voici pour faire fonctionner une navigation en CSS pur : http://codepen.io/raphaelgoetter/pen/JGOgJj?editors=110

Bonne journée

Merci à tous pour ces infos
Je ne suis peut être pas moins idiot, mais j'ai appris quelque chose!!!

Salut,

En effet, ça sélectionne la cible du lien de ton élément cliqué et donc de styler cette cible.
C'est bien :target et non ::target (une pseudo-classe et non un pseudo-element).
Par exemple, dans une navigation par système d'ancres, tu peux te déplacer jusqu'à cette ancre et en même temps tu modifies l'apparence de cet élément précis.

Exemple : http://codepen.io/korell/pen/KzrrmG?editors=1100

Comme tu le dis, c'est génial pour faire des sortes de "hacks" comme des menus en pur CSS où des systèmes d'onglets en jouant sur des display: none;

EDIT : ah bah je n'avais pas vu le post de Raphael, mon onglet était ouvert depuis longtemps..., ça fait un peu doublon
Modifié par MatthieuR (03 May 2016 - 13:37)