25
Des styles qui atteignent leur cible
:link.et.:visited.sont.ce.qu’on.appelle.des.pseudo-classes.de.liens..Elles.ne.peuvent.être.
appliquées.qu’aux.éléments.d’ancre..:hover,.:active.et.:focus.sont.des.pseudo-classes.
dynamiques,.qui.peuvent.théoriquement.s’appliquer.à.n’importe.quel.élément..La.plupart.
des.navigateurs.modernes.prennent.en.charge.cette.fonctionnalité..On.ne.s’étonnera.pas,.en.
revanche,.qu’Internet.Explorer 6.ne.prête.attention.aux.pseudo-classes.:active.et.:hover.
que. lorsqu’elles. s’appliquent. à. un. lien. d’ancre. et. ignore. complètement. :focus.. Internet.
Explorer 7.prend.en.charge.:hover.sur.n’importe.quel.élément,.mais.ignore.:active.et.
:focus.
Enfin,.il.vaut.la.peine.de.noter.que.les.pseudo-classes.peuvent.être.adjointes.les.unes.aux.
autres.afin.de.créer.des.comportements.plus.complexes,.par.exemple.pour.un.effet.de.survol.
différent.sur.les.liens.déjà.consultés.et.ceux.qui.ne.l’ont.pas.été.
/* affiche tous les liens visités survolés en vert olive */
a:visited:hover {color:olive;}
Le sélecteur universel
Le.sélecteur.universel.est.sans.doute.le.plus.efficace.et.le.moins.utilisé.de.tous.les.sélecteurs..
Il.agit.à.la.manière.d’un.joker,.puisqu’il.désigne.tous.les.éléments.disponibles..Comme.les.
jokers.dans.d’autres.langages,.il.est.identifié.par.un.astérisque..Il.est.souvent.utilisé.pour.
appliquer.des.mises.en.forme.à.tous.les.éléments.d’une.page..Par.exemple,.pour.supprimer.
le.remplissage.et.les.marges.par.défaut.du.navigateur.sur.tous.les.éléments,.vous.pouvez.
utiliser.la.règle.suivante :
* {
padding: 0;
margin: 0;
}
Combiné.avec.d’autres.sélecteurs,.le.sélecteur.universel.peut.servir.à.mettre.en.forme.tous.
les.descendants.d’un.élément.particulier.ou.à.ignorer.un.niveau.de.descendants..Vous.verrez.
comment.procéder.en.pratique.à.une.autre.section.de.ce.chapitre..
Les sélecteurs avancés
Les.CSS 2.1.et.CSS 3.possèdent.un.certain.nombre.d’autres.sélecteurs.utiles..Malheureusement,.si.la.plupart.des.navigateurs.modernes.les.prennent.en.charge,.ce.n’est.pas.le.cas.
des.plus.anciens,.comme.Internet.Explorer 6..Les.CSS.ont.cependant.été.conçues.en.tenant.
compte.des.problèmes.de.compatibilité.descendante..Si.un.navigateur.ne.comprend.pas.un.
sélecteur,.il.ignore.tout.simplement.la.règle..Il.est.ainsi.possible.d’appliquer.des.embellissements.stylistiques.et.fonctionnels.dans.les.navigateurs.récents.sans.craindre.les.problèmes.
qui.pourraient.en.découler.dans.les.navigateurs.anciens..Évitez.simplement.d’utiliser.ces.
sélecteurs.avancés.pour.des.fonctionnalités.essentielles.ou.des.aspects.très.importants.de.la.
mise.en.page.du.site.
Des styles qui atteignent leur cible
:link.et.:visited.sont.ce.qu’on.appelle.des.pseudo-classes.de.liens..Elles.ne.peuvent.être.
appliquées.qu’aux.éléments.d’ancre..:hover,.:active.et.:focus.sont.des.pseudo-classes.
dynamiques,.qui.peuvent.théoriquement.s’appliquer.à.n’importe.quel.élément..La.plupart.
des.navigateurs.modernes.prennent.en.charge.cette.fonctionnalité..On.ne.s’étonnera.pas,.en.
revanche,.qu’Internet.Explorer 6.ne.prête.attention.aux.pseudo-classes.:active.et.:hover.
que. lorsqu’elles. s’appliquent. à. un. lien. d’ancre. et. ignore. complètement. :focus.. Internet.
Explorer 7.prend.en.charge.:hover.sur.n’importe.quel.élément,.mais.ignore.:active.et.
:focus.
Enfin,.il.vaut.la.peine.de.noter.que.les.pseudo-classes.peuvent.être.adjointes.les.unes.aux.
autres.afin.de.créer.des.comportements.plus.complexes,.par.exemple.pour.un.effet.de.survol.
différent.sur.les.liens.déjà.consultés.et.ceux.qui.ne.l’ont.pas.été.
/* affiche tous les liens visités survolés en vert olive */
a:visited:hover {color:olive;}
Le sélecteur universel
Le.sélecteur.universel.est.sans.doute.le.plus.efficace.et.le.moins.utilisé.de.tous.les.sélecteurs..
Il.agit.à.la.manière.d’un.joker,.puisqu’il.désigne.tous.les.éléments.disponibles..Comme.les.
jokers.dans.d’autres.langages,.il.est.identifié.par.un.astérisque..Il.est.souvent.utilisé.pour.
appliquer.des.mises.en.forme.à.tous.les.éléments.d’une.page..Par.exemple,.pour.supprimer.
le.remplissage.et.les.marges.par.défaut.du.navigateur.sur.tous.les.éléments,.vous.pouvez.
utiliser.la.règle.suivante :
* {
padding: 0;
margin: 0;
}
Combiné.avec.d’autres.sélecteurs,.le.sélecteur.universel.peut.servir.à.mettre.en.forme.tous.
les.descendants.d’un.élément.particulier.ou.à.ignorer.un.niveau.de.descendants..Vous.verrez.
comment.procéder.en.pratique.à.une.autre.section.de.ce.chapitre..
Les sélecteurs avancés
Les.CSS 2.1.et.CSS 3.possèdent.un.certain.nombre.d’autres.sélecteurs.utiles..Malheureusement,.si.la.plupart.des.navigateurs.modernes.les.prennent.en.charge,.ce.n’est.pas.le.cas.
des.plus.anciens,.comme.Internet.Explorer 6..Les.CSS.ont.cependant.été.conçues.en.tenant.
compte.des.problèmes.de.compatibilité.descendante..Si.un.navigateur.ne.comprend.pas.un.
sélecteur,.il.ignore.tout.simplement.la.règle..Il.est.ainsi.possible.d’appliquer.des.embellissements.stylistiques.et.fonctionnels.dans.les.navigateurs.récents.sans.craindre.les.problèmes.
qui.pourraient.en.découler.dans.les.navigateurs.anciens..Évitez.simplement.d’utiliser.ces.
sélecteurs.avancés.pour.des.fonctionnalités.essentielles.ou.des.aspects.très.importants.de.la.
mise.en.page.du.site.