Au clic et lors de la sélection
Vous pouvez interagir encore plus finement en CSS. Nous allons voir ici que nous pouvons changer l'apparence des éléments lorsque l'on clique dessus et lorsqu'ils sont sélectionnés !
Le pseudo-format :active permet d'appliquer un style particulier au moment du clic. En pratique, il n'est utilisé que sur les liens.
Le lien gardera cette apparence très peu de temps : en fait, le changement intervient lorsque le bouton de la souris est enfoncé. En clair, ce n'est pas forcément toujours bien visible.
On peut par exemple changer la couleur de fond du lien lorsque l'on clique dessus :
a:active /* Quand le visiteur clique sur le lien */ { background-color: #FFCC66; } |
Là, c'est un peu différent. Le pseudo-format :focus applique un style lorsque l'élément est sélectionné.
C'est-à-dire ?
Une fois que vous avez cliqué, le lien reste « sélectionné » (il y a une petite bordure en pointillés autour). C'est cela, la sélection.
Ce pseudo-format pourra être appliqué à d'autres balises HTML que nous n'avons pas encore vues, comme les éléments de formulaires.
Essayons pour l'instant sur les liens :
a:focus /* Quand le visiteur sélectionne le lien */ { background-color: #FFCC66; } |
Sous Google Chrome et Safari, l'effet ne se voit que si l'on appuie sur la touche Tab.
Créé avec HelpNDoc Personal Edition: Générateur de documentation et EPub gratuit