26
Maîtrise des CSS
Sélecteur d’enfants et sélecteur de frère adjacent
Le. premier. des. sélecteurs. avancés. est. le. sélecteur. d’enfants.. Si. un. sélecteur. descendant.
sélectionne.tous.les.descendants.d’un.élément,.le.sélecteur.d’enfants.ne.cible.que.les.descendants.immédiats.de.l’élément,.que.l’on.appelle.ses.enfants..Dans.l’exemple.suivant,.les.
éléments.de.la.liste.externe.se.voient.attribuer.une.icône.personnalisée.alors.que.ceux.de.la.
liste.imbriquée.restent.inchangés.(voir.Figure 2.1) :
#nav>li {
background: url(folder.png) no-repeat left top;
padding-left: 20px;
}

• Accueil


• Services
  
  
  
  • Conception
  
  
  • Développement
  
  
  • Consulting
  
  
  
  


• Nous contacter

Figure 2.1
Le sélecteur d’enfants
met en forme les
enfants de la liste, mais
pas ses petits-enfants.
Le.sélecteur.d’enfants.est.pris.en.charge.par.Internet.Explorer 7.et.ses.versions.ultérieures..
Un. petit. bogue. de. la. version  7. provoque. cependant. des. problèmes. si. des. commentaires.
HTML.sont.insérés.entre.le.parent.et.l’enfant.
Il.est.possible.de.simuler.un.sélecteur.d’enfants.qui.fonctionne.avec.Internet.Explorer 6.et.
les.versions.antérieures.à.l’aide.du.sélecteur.universel..Pour.cela,.vous.devez.d’abord.appliquer.à.tous.les.descendants.le.style.que.vous.souhaitez.attribuer.aux.enfants..Ensuite,.utilisez.
le.sélecteur.universel.pour.redéfinir.ces.styles.avec.les.descendants.des.enfants..Pour.simuler.
le.précédent.exemple.de.sélecteur.d’enfants,.vous.écririez.ainsi :
#nav li {
background: url(folder.png) no-repeat left top;
badding-left: 20px;
}
#nav li * {
background-image: none;
padding-left: 0;
}