Les pseudo-classes sont des sélecteurs d'une catégorie à part. Il s'agit de catégorisation de sélecteurs régulièrement utilisés et qui permettent d'accéder plus rapidement à un élément ou attribut donné. Il existe de nombreuses pseudo-classes. Nous en verrons ici quelques-unes et d'autres seront aperçues dans d'autres chapitres.
Le but des pseudo-classe est d'enrichir l'interaction en donnant de la rétro-action ou des informations visuelles importantes pour le lecteur et cela selon le contexte. Le fonctionnement de la pseudo-classe va se faire simplement en la mentionnant en tant que règle.
element:pseudo-classe { propriété_css : valeur; }
Les pseudos-classes font toutes parties d'un dictionnaire et sont toutes précédées d'un :
. Les plus connues sont certainement celles qui ont trait aux liens en particulier :hover que nous verrons dans le paragraphe suivant. Il existe cependant deux pseudo-classes générales qui peuvent être utiles qui sont :focus
et :lang
.
L'utilisation de focus
sert systématiquement à mettre en avant l'élément de la page qui est activé. Cela peut être un paragraphe, une section, un champ de formulaire ou tout autre élément accédé à la souris ou au clavier (par le biais d'un raccourcis).
element:focus {background : yellow; }
Exemple : cliquez moi dessus
Remarquez ici que la couleur reste appliquée dans que l'élément a le focus à l'inverse d'un survol classique sur un lien.
Il n'est pas rare d'avoir des mots de langue étrangère dans une page, voire de vouloir afficher certaines parties ou pas selon la langue. Internet n'est-il pas le lieu absolu de l'internationalité ? Aussi les attributs lang
utilisés dans le code html pourront-ils être directement accédés et stylés avec la pseudo-classe :lang
suivi entre parenthèse du code de la langue. Par exemple.
<p>Nous disons <span lang="fr">Bonjour</span> en français mais <span lang="en">Hello</span> en anglais.</p>
Mise en forme de la façon suivante :
span:lang(fr) {color:red}
span:lang(en) {color:green}
ce qui donnera :
Nous disons Bonjour en français mais Hello en anglais.
Les pseudo-classes :link
, :hover
et :visited
ont certainement été jusqu'à aujourd'hui les plus utilisées. Elles servent a spécifier l'apparence d'une balise, en général un lien, en fonction de l'action actuelle ou passée de la souris vis-à-vis de cette balise. On peut aussi y ajouter :active qui définit l'état du lien au moment de son activation, c'est-à-dire tant que le bouton de la souris est enfoncé dessus.
Reprenons notre code HTML :
<h1>Utiliser du <abbr>CSS3</abbr> avec du <abbr>HTML5</abbr></h1> <p>Le <abbr>CSS3</abbr> est la variante en cours de recommandation par le <a href=«http://w3.org»> <abbr>W3C</abbr> </a>. Elle s'inscrit, par rapport à ses prédécesseurs, dans la même logique de perfectionnement que le <abbr>HTML5</abbr> par rapport au <abbr>HTML4</abbr>.</p> <p>Le CSS apporte de nombreuses améliorations et extensions qui le rendent beaucoup plus universel et utilisables dans de nombreux contextes.</p>
<aside><p>Le CSS3 est encore en cours de définition, vérifiez régulièrement l'avancée de la recommandation!</p></aside>
du CSS :
a:hover
{color
:green
; }
a:link
{color
:red
; }
a:visited
{color
:yellow
; }
aside > p:hover
{color
:orange; }
pour un rendu :
Le CSS3 est la variante en cours de recommandation par le W3C . Elle s'inscrit, par rapport à ses prédécesseurs, dans la même logique de perfectionnement que le HTML5 par rapport au HTML4.
Le CSS apporte de nombreuses améliorations et extensions qui le rendent beaucoup plus universel et utilisables dans de nombreux contextes.
Le CSS3 est encore en cours de définition, vérifiez régulièrement l'avancée de la recommandation!
En passant la souris sur les éléments stylés, on perçoit immédiatement l'action de :hover
alors que l'effet de :visited
ne sera visible que si vous cliquez sur le lien et revenez ensuite sur cette page. On peut voir par ailleurs que ces pseudo-classes ne s'appliquent pas qu'au lien : l'interaction fonctionne aussi sur le dernier paragraphe quand bien même aucune balise a
n'y est placée.
Résumons les pseudo-classes concernant les liens :
Depuis l'avènement du CSS3 et du HTML5, de nouveaux comportements par défaut ont été attribués aux formulaires. Le navigateur a par défaut l'obligation de valider les informations saisies par l'utilisateur pour vérifier s'il est conforme à ce qu'on attend dans le champ, par exemple qu'un champ Age contient bien un chiffre ou si une personne a oublié de remplir un champ obligatoire.
En commençant avec :focus, on pourra mettre en forme spécifiquement le champ actif :
input { border : thin solid red; background:#EEE; } input:focus { border : thin solid green; background:#EFE; }
Dans l'exemple précédent, la mise en forme par défaut du input, suivi ci-dessous du focus, appliqué au second champ.
Pour étendre cela d'autres pseudo-classes ont été créées de manière à normaliser les comportements. Elles sont :
Il y a une erreur de communication avec le serveur Booktype. Nous ne savons pas actuellement où est le problème.
Vous devriez rafraîchir la page.