Les pseudo-classes ne se différencient pas des classes conventionnelles par leur fonctionnement. Par contre, la syntaxe du sélecteur de balise est légérement différente : le nom de classe est prédéfini et il est séparé de la balise par deux points (":").
Il existe trois pseudo-classes dynamiques qui peuvent en principe s'appliquer à pratiquement toutes les balises du langage HTML, mais leur fonctionnement dépend du navigateur. Si ce-dernier ne reconnaît pas la pseudo-classe, bien évidemment elle sera ignorée, c'est le cas par exemple de :focus avec le navigateur de Netscape. De même, l'application des styles peut subir des limitations, notamment dans la définition d'une taille de police plus grande pour un lien actif.
La pseudo-classe :hover {...} agît lorsque le curseur de la souris pointe l'élément.
La pseudo-classe :active {...} agît lors de l'activation de l'élément par un clic de souris notamment.
La pseudo-classe :focus {...} agît lors de la réception du focus par le clavier ou par la souris.
Les pseudo-classes peuvent également être combinées afin que l'élément réagisse à une combinaison de types d'événement.
a:focus:hover {font-size: 12pt; color: red;}
Dans ce cas, cette commande correspond à un lien qui reçoit le focus et qui est pointé par le curseur d'une souris.
<html> <head> <style> <-- Balise:hover... {Propriété1:Valeur1;...} Balise:active... {Propriété1:Valeur1;...} Balise:focus... {Propriété1:Valeur1;...} ... Règles de style ... --> </style> ... </head> <body> <Balise> ... </Balise> ... Diverses commandes HTML ... </body> </html> |
Windows | Macintosh | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
NE4 | NE6 | NE7 | IE5 | IE55 | IE6 | OP5 | OP6 | OP7 | NE4 | NE6 | NE7 | IE4 | IE5 |