Pseudo-classe

 

Généralement, l'utilisateur repère un lien hypertexte par sa modification (changement de couleur, de taille, de fond,...) lors la souris le survole : S'il vous plait, survolez-moi

CSS permet de définir un style pour un état (survolé, activé, visité) d'un élément. Ces états (:hover, :active, :visited) sont nommés "pseudoclasse".

Entrons dans le vif du Sujet

      CSS1 iemzchromeoperasafari
I Pseudo-classes dynamiques :hover, :active et :focus

Les pseudo-classes dynamiques :hover, :active et :focus s'appliquent dans les dernières versions à n'importe quel élément (avec les restrictions récurrentes : ie6 ne connait que :active et :hover et seulement sur les liens, ie7 généralise :hover mais pas :focus).

II Pseudo-classes de contexte :link , :visited

1) :link et :visited (ne peuvent appliquées qu'aux liens.)

Exemple

Mon lien1 à tester.   Mon lien2 à tester.

La conjonction de plusieurs états (liens survolés et déjà consultés) est possible

Exemple

 Mon lien3 à tester.

2) :focus, :cheked très utiles pour les formulaires.

Exemple

Il existe beaucoup de pseudo-classes de formulaire : :cheked, :indeterminate, :disabled, :enabled, :read-only, :read-write, :valid, :invalid, :optional, :required, :in-range, :out-of-range

Le sélecteur :checked cible tous les éléments de formulaires pouvant être cochés comme les cases à cocher ( <input type="checkbox">) et les boutons radios ( <input type="radio">)

Exemple

Cocher une case, son label devient bleu :

Nous pourrons dans une prochaine section détailler leurs usages.

3) :target, :lang

:target lorsque la page présente une ancre(<a name="toto"></a>, <h2 id="monTitre">) qui pourra être ciblée par un lien [fragment identifier](http://url.com/page.html#hash)

Exemple

Suivre le lien interne, et voyez l'effet :

lien vers "bla bla bla bla bla "

bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla

II Nouvelles pseudo classes d'état :empty, :blank,

:empty permettra par exemple de cacher des éléments vides, idem pour :blank en ajoutant les éléments qui contiennent des retours chariot

Exemple

III Pseudo classe (syntaxique ?) :not

par exemple le sélecteur .toto:not(.titi) sélectionne tous les éléments qui possèdent la classe .toto mais n'ayant pas la classe .titi

Exemple

 

Avez-vous atteint les objectifs ?
Vous devez :
Testez-vous

Pourquoi faut-il doubler une déclaration ":hover" par ":focus" ?