268
Maîtrise des CSS
Sélecteurs de frères adjacents
Après.avoir.vu.:first-child,.le.moment.est.tout.trouvé.pour.vous.de.découvrir.:lastchild,.qui.permet.de.cibler.la.dernière.occurrence.d’un.élément.enfant.dans.un.conteneur.
parent.spécifique..Le.principe.est.le.même.que.pour.:first-child,.aussi.n’hésitez.pas.à.
faire. des. essais.. Malheureusement,. seules. les. dernières. versions. des. navigateurs. comme.
Safari,.Firefox,.Google.Chrome.et.Opera.prennent.en.charge.cette.méthode..Il.convient.donc.
de.tenir.compte.d’Internet.Explorer 6,.7.et 8.en.employant.une.méthode.alternative,.grâce.
aux.sélecteurs.de.frères.adjacents..
Dans.cet.exemple,.nous.devons.maintenant.réaliser.l’inverse.de.ce.que.nous.venons.de.faire.
avec. la. pseudo-classe. :first-child.. Comme. indiqué. précédemment,. chaque. élément. de.
liste.à.puces.possède.un.remplissage.supérieur.et.inférieur.ainsi.qu’une.bordure.supérieure.
et.inférieure..Nous.avons.pu.annuler.ces.styles.pour.le.premier.élément.li,.nous.devons.
maintenant.le.faire.pour.le.dernier.élément..
Comment.procéder ?.Comment.la.feuille.de.styles.va-t-elle.savoir.quel.est.le.dernier.élément.
d’un.certain.groupe.et.comment.le.cibler.précisément ?.
Les.sélecteurs.de.frères.adjacents.sont.constitués.de.plusieurs.sélecteurs.séparés.par.le.combinateur.+..Ce.symbole.représente.un.élément.qui.est.le.prochain.frère.du.premier.élément..
Notez.que.les.éléments.doivent.avoir.le.même.parent.et.que.le.premier.doit.immédiatement.
précéder.le.second..
Comme. pour. :first-child,. nous. ciblons. encore. la. div. parente. others_routes. et. nous.
descendons.méthodiquement.vers.les.profondeurs.à.l’aide.des.sélecteurs,.jusqu’à.atteindre.
l’élément.que.nous.souhaitons.mettre.en.forme..La.liste.à.puces.aura.toujours.quatre.éléments.li..C’est.ici.la.clé.de.notre.méthode :
div#others_routes ul li + li + li + li {
padding-bottom:0;
border-bottom:none;
}
Nous.avons.créé.un.sélecteur.dont.la.signification.pourrait.se.traduire.ainsi :."Ah,.lorsque.
vous.êtes.dans.la.div.others_routes,.trouvez.la.liste.à.puces,.comptez.jusqu’au.quatrième.
élément.li.et.appliquez.les.styles.à.cet.élément.uniquement.".Simple..
Le.résultat.(voir.Figure 11.12).présente.le.quatrième.élément.li.sans.remplissage.inférieur.
ou.bordure.inférieure..Le.résultat.est.plus.soigné..Il.témoigne.d’une.grande.attention.portée.
aux.détails,.grâce.simplement.aux.sélecteurs.CSS.à.disposition..
Figure 11.12
La bordure et le
remplissage inférieurs
ont été retirés avec
succès.
Maîtrise des CSS
Sélecteurs de frères adjacents
Après.avoir.vu.:first-child,.le.moment.est.tout.trouvé.pour.vous.de.découvrir.:lastchild,.qui.permet.de.cibler.la.dernière.occurrence.d’un.élément.enfant.dans.un.conteneur.
parent.spécifique..Le.principe.est.le.même.que.pour.:first-child,.aussi.n’hésitez.pas.à.
faire. des. essais.. Malheureusement,. seules. les. dernières. versions. des. navigateurs. comme.
Safari,.Firefox,.Google.Chrome.et.Opera.prennent.en.charge.cette.méthode..Il.convient.donc.
de.tenir.compte.d’Internet.Explorer 6,.7.et 8.en.employant.une.méthode.alternative,.grâce.
aux.sélecteurs.de.frères.adjacents..
Dans.cet.exemple,.nous.devons.maintenant.réaliser.l’inverse.de.ce.que.nous.venons.de.faire.
avec. la. pseudo-classe. :first-child.. Comme. indiqué. précédemment,. chaque. élément. de.
liste.à.puces.possède.un.remplissage.supérieur.et.inférieur.ainsi.qu’une.bordure.supérieure.
et.inférieure..Nous.avons.pu.annuler.ces.styles.pour.le.premier.élément.li,.nous.devons.
maintenant.le.faire.pour.le.dernier.élément..
Comment.procéder ?.Comment.la.feuille.de.styles.va-t-elle.savoir.quel.est.le.dernier.élément.
d’un.certain.groupe.et.comment.le.cibler.précisément ?.
Les.sélecteurs.de.frères.adjacents.sont.constitués.de.plusieurs.sélecteurs.séparés.par.le.combinateur.+..Ce.symbole.représente.un.élément.qui.est.le.prochain.frère.du.premier.élément..
Notez.que.les.éléments.doivent.avoir.le.même.parent.et.que.le.premier.doit.immédiatement.
précéder.le.second..
Comme. pour. :first-child,. nous. ciblons. encore. la. div. parente. others_routes. et. nous.
descendons.méthodiquement.vers.les.profondeurs.à.l’aide.des.sélecteurs,.jusqu’à.atteindre.
l’élément.que.nous.souhaitons.mettre.en.forme..La.liste.à.puces.aura.toujours.quatre.éléments.li..C’est.ici.la.clé.de.notre.méthode :
div#others_routes ul li + li + li + li {
padding-bottom:0;
border-bottom:none;
}
Nous.avons.créé.un.sélecteur.dont.la.signification.pourrait.se.traduire.ainsi :."Ah,.lorsque.
vous.êtes.dans.la.div.others_routes,.trouvez.la.liste.à.puces,.comptez.jusqu’au.quatrième.
élément.li.et.appliquez.les.styles.à.cet.élément.uniquement.".Simple..
Le.résultat.(voir.Figure 11.12).présente.le.quatrième.élément.li.sans.remplissage.inférieur.
ou.bordure.inférieure..Le.résultat.est.plus.soigné..Il.témoigne.d’une.grande.attention.portée.
aux.détails,.grâce.simplement.aux.sélecteurs.CSS.à.disposition..
Figure 11.12
La bordure et le
remplissage inférieurs
ont été retirés avec
succès.