267
Étude de cas : Climb the Mountains
Dans.le.conteneur.des.itinéraires.des.membres,.les.informations.de.détail.de.chaque.élément.
sont.ajoutées.sur.une.liste.à.puces..Chacun.des.éléments.li.possède.le.même.remplissage.et.
une.fine.bordure.supérieure.et.inférieure..
div#others_routes ul li {
margin:0;
padding:10px 55px 10px 0;
position:relative;
border-bottom:1px solid #dedeaf;
border-top:1px solid #fff;
}
Le.contenu.de.la.liste.est.ainsi.espacé.de.manière.régulière,.mais.j’aimerais.réduire.la.quantité.de.remplissage.uniquement.pour.l’élément.du.haut.de.la.liste.(dans.cet.exemple,.il.s’agit.
du.circuit.de.randonnée.Kinderscout)..Je.ne.veux.d’ailleurs.pas.du.tout.de.remplissage.en.
haut,.et.pas.de.bordure.non.plus..
Pseudo-classe,.à.la.rescousse !.Ici,.je.crée.une.nouvelle.règle.et.j’utilise.le.même.sélecteur.
pour.cibler.les.éléments.de.la.liste.à.puces.à.l’intérieur.de.la.div.conteneur.#others_routes,.
mais.en.ajoutant.:first-child.juste.après.l’élément.li,.afin.de.transmettre.en.somme.ce.
message.au.navigateur :."Entrez.dans.le.conteneur,.trouvez.la.liste.à.puces.et.appliquez.la.
mise.en.forme.suivante.en.ne.redéfinissant.que.le.tout.premier.élément.trouvé."
div#others_routes ul li:first-child {
padding-top:0;
border-top:none;
}
Comme.le.montre.la.Figure 11.11,.l’élément.du.circuit.de.Kinderscout.n’a.plus.de.bordure.
ni. de. remplissage. supérieurs. et. se. cale. maintenant. bien. serré. sur. la. partie. supérieure. du.
conteneur.parent..
Figure 11.11
Le remplissage et la
bordure du haut ont
été supprimés.
Cette.technique.est.un.jeu.d’enfant,.mais.elle.constitue.une.méthode.très.efficace.pour.cibler.
un.élément.particulier,.à.mille.et.une.fins.possibles..Maintenant.que.nous.avons.traité.le.haut.
de.la.liste,.voyons.ce.qu’on.peut.faire.avec.le.bas.