Amélioration des styles avec les pseudo-classes d’action utilisateur
Les pseudo-classes d’action utilisateur permettent de styliser un élément interactif en fonction de son état actuel. Elles facilitent l’interaction et informent l’utilisateur sur l’action réalisée. En général, ces pseudo-classes d’état sont appliquées aux éléments <button> et <a>.
La syntaxe est la suivante :
selector:pseudo-class {
property: value;
}
selectorpeut être n’importe quel sélecteur abordé dans les chapitres précédents ;pseudo-classnécessite un:avant sa déclaration, sans espace ajouté.
Remarque
Nous aborderons les pseudo-classes d’état les plus utiles (
hover,focus,activeetvisited).
:hover
La pseudo-classe :hover est utilisée pour réagir aux actions de l’utilisateur lorsqu’il interagit avec un élément à l’aide d’un dispositif de pointage, comme le survol de l’élément avec la souris. Il est possible de tester cet effet dans l’exemple suivant en survolant les éléments button et a.
index.html
styles.css
:focus
La pseudo-classe :focus fonctionne de manière similaire à la pseudo-classe :hover. Elle réagit à la mise au point d’un élément, généralement obtenue via la navigation au clavier à l’aide de la touche « Tab ». Pour garantir la cohérence du comportement des éléments interactifs pour tous les utilisateurs, il est recommandé d’utiliser les deux pseudo-classes ensemble pour le style. Ainsi, les utilisateurs naviguant à la souris comme ceux utilisant le clavier bénéficient de la même expérience.
La différence entre :hover et :focus
:hoverréagit à l’activité du curseur de la souris ;:focusréagit à l’activité du clavier (touche « Tab »).
Dans l'exemple suivant, nous avons le même élément avec différentes pseudo-classes. Veuillez prêter attention au fichier styles.css. Nous pouvons remarquer qu'il est possible d'ajouter les mêmes styles pour les effets de survol et de focus en séparant le sélecteur et la pseudo-classe avec ,.
index.html
styles.css
:active
:active est déclenché lorsqu'un élément est activé, par exemple lors d'un clic sur un lien. Bien que tout élément puisse être activé, cette pseudo-classe est généralement utilisée pour les liens et les boutons.
index.html
styles.css
:visited
La pseudo-classe :visited s'applique aux liens qui ont déjà été consultés. Par défaut, les liens sont affichés en bleu et deviennent violets après avoir été visités.
index.html
styles.css
1. Quelle pseudo-classe est déclenchée lorsqu’un utilisateur survole un élément avec sa souris ?
2. Quelle pseudo-classe est appliquée à un lien qui a déjà été visité ?
Merci pour vos commentaires !
Demandez à l'IA
Demandez à l'IA
Posez n'importe quelle question ou essayez l'une des questions suggérées pour commencer notre discussion
Can you explain more about how to use :hover and :focus together?
What are some best practices for styling interactive elements with these pseudo-classes?
Can you show examples of using :active and :visited as well?
Awesome!
Completion rate improved to 2.56Amélioration des styles avec les pseudo-classes d’action utilisateur
Glissez pour afficher le menu
Les pseudo-classes d’action utilisateur permettent de styliser un élément interactif en fonction de son état actuel. Elles facilitent l’interaction et informent l’utilisateur sur l’action réalisée. En général, ces pseudo-classes d’état sont appliquées aux éléments <button> et <a>.
La syntaxe est la suivante :
selector:pseudo-class {
property: value;
}
selectorpeut être n’importe quel sélecteur abordé dans les chapitres précédents ;pseudo-classnécessite un:avant sa déclaration, sans espace ajouté.
Remarque
Nous aborderons les pseudo-classes d’état les plus utiles (
hover,focus,activeetvisited).
:hover
La pseudo-classe :hover est utilisée pour réagir aux actions de l’utilisateur lorsqu’il interagit avec un élément à l’aide d’un dispositif de pointage, comme le survol de l’élément avec la souris. Il est possible de tester cet effet dans l’exemple suivant en survolant les éléments button et a.
index.html
styles.css
:focus
La pseudo-classe :focus fonctionne de manière similaire à la pseudo-classe :hover. Elle réagit à la mise au point d’un élément, généralement obtenue via la navigation au clavier à l’aide de la touche « Tab ». Pour garantir la cohérence du comportement des éléments interactifs pour tous les utilisateurs, il est recommandé d’utiliser les deux pseudo-classes ensemble pour le style. Ainsi, les utilisateurs naviguant à la souris comme ceux utilisant le clavier bénéficient de la même expérience.
La différence entre :hover et :focus
:hoverréagit à l’activité du curseur de la souris ;:focusréagit à l’activité du clavier (touche « Tab »).
Dans l'exemple suivant, nous avons le même élément avec différentes pseudo-classes. Veuillez prêter attention au fichier styles.css. Nous pouvons remarquer qu'il est possible d'ajouter les mêmes styles pour les effets de survol et de focus en séparant le sélecteur et la pseudo-classe avec ,.
index.html
styles.css
:active
:active est déclenché lorsqu'un élément est activé, par exemple lors d'un clic sur un lien. Bien que tout élément puisse être activé, cette pseudo-classe est généralement utilisée pour les liens et les boutons.
index.html
styles.css
:visited
La pseudo-classe :visited s'applique aux liens qui ont déjà été consultés. Par défaut, les liens sont affichés en bleu et deviennent violets après avoir été visités.
index.html
styles.css
1. Quelle pseudo-classe est déclenchée lorsqu’un utilisateur survole un élément avec sa souris ?
2. Quelle pseudo-classe est appliquée à un lien qui a déjà été visité ?
Merci pour vos commentaires !
