Pseudo Mot de passe
fleche Inscription
fleche Mot de passe oublié ?
Informations Générales
Chargement en cours...
Nombre de Visites fleche [ 1 036 256 ]
Votre IP fleche [ 38.107.191.115 ]
Vous êtes ici : Home Page Cours CSS Pseudo-classe dynamique
Imprimer le document Version Imprimable

Informations Générales

[425] Posts sur le forum
[453] Membres inscrits
Il y a en ligne :
arrow 0 Membre
arrow 4 Invités
fled Membre en ligne:
Aucun

Partenariat

Partenariat Vous pouvez aider ce site à évoluer, en contribuant à son développement. Proposez vos idées de cours et/ou dossiers.
Rendez-vous dans « Partenariat » pour en savoir plus.

Publicité


Prestataire

N°1 de l'hébergement, location de serveurs, nom de domaines et téléphonie.
(OVH est recommandé par Webelix.net)

www.

Nos Partenaires

Alsacreations
Dreamseed
L'éditeur JavaScript
DicoDuNet
Noogle
Tutopla.net
Page précédente | Page suivante

Les pseudo-classes dynamiques

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.

Exemple

<html>
 <head> 
  <style type="text/css">
  <!--
   Balise:hover... {Propriété1:Valeur1; ...}
   Balise:active... {Propriété1:Valeur1; ...}
   Balise:focus... {Propriété1:Valeur1; ...}
  -->
  </style>
 </head>

 <body>
  <Balise> ... </Balise>
 </body>
</html>
Page précédente | Page suivante
Haut de page