Apprendre Amélioration des styles avec les pseudo-classes d’action utilisateur

Les pseudo-classes d'action utilisateur permettent de styliser les éléments en fonction de la manière dont les utilisateurs interagissent avec eux. Elles sont couramment appliquées aux éléments <button> et <a> afin de fournir un retour visuel lors des interactions.

La syntaxe est la suivante :

selector:pseudo-class {
  property: value;
}

selector peut être n'importe quel sélecteur abordé dans les chapitres précédents ;
pseudo-class nécessite : avant sa déclaration, sans ajouter d'espace.

Remarque

Nous examinerons les pseudo-classes d'état les plus utiles (hover, focus, active et visited).

:hover

Déclenchée lorsqu'un utilisateur pointe un élément avec le curseur de la souris. Idéal pour créer un retour visuel interactif.

index.html

styles.css

:focus

S'active lorsqu'un élément reçoit le focus clavier (généralement via la touche Tab). Pour garantir l'accessibilité, les styles de survol et de focus sont souvent associés, offrant ainsi une expérience cohérente aux utilisateurs de la souris et du clavier.

La différence entre :hover et :focus

:hover réagit à l'activité du curseur de la souris ;
:focus ré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

Déclenché lorsqu'un élément est activé, généralement lors d'un clic de souris sur des boutons ou des liens.

index.html

styles.css

:visited

S'applique aux liens après que l'utilisateur a déjà visité leur destination. Les navigateurs affichent généralement les liens non visités en bleu et les liens visités en violet, sauf si vous remplacez ces styles.

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é ?

Tout était clair ?

Merci pour vos commentaires !

Section 1. Chapitre 6

Demandez à l'IA

Posez n'importe quelle question ou essayez l'une des questions suggérées pour commencer notre discussion

Suggested prompts:

Can you explain more about how to use :hover and :focus together for accessibility?

What are some best practices for styling navigation links with pseudo-classes?

Could you show examples of using :active and :visited with links?

Glissez pour afficher le menu

La syntaxe est la suivante :

selector:pseudo-class {
  property: value;
}

selector peut être n'importe quel sélecteur abordé dans les chapitres précédents ;
pseudo-class nécessite : avant sa déclaration, sans ajouter d'espace.

Remarque

Nous examinerons les pseudo-classes d'état les plus utiles (hover, focus, active et visited).

:hover

Déclenchée lorsqu'un utilisateur pointe un élément avec le curseur de la souris. Idéal pour créer un retour visuel interactif.

index.html

styles.css

:focus

La différence entre :hover et :focus

:hover réagit à l'activité du curseur de la souris ;
:focus réagit à l'activité du clavier (touche "Tab").

index.html

styles.css

:active

Déclenché lorsqu'un élément est activé, généralement lors d'un clic de souris sur des boutons ou des liens.

index.html

styles.css

:visited

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é ?

Tout était clair ?

Merci pour vos commentaires !

Section 1. Chapitre 6