266
Maîtrise des CSS
div#others_routes ul li p.username {
margin:3px 0 0 0;
font-style:italic;
font-size:12px;
}
div#others_routes ul li p.username a {
color:#666;
}
div#others_routes ul li p.username a:hover,
div#others_routes ul li p.username a:focus {
text-decoration:underline;
}
Dans.ce.code,.nous.ciblons.les.éléments.HTML.plus.profonds.avec.des.sélecteurs.descendants.simples..Par.exemple,.on.peut.cibler.de.manière.stratégique.la.mise.en.forme.de.survol.
du.lien.de.nom.d’utilisateur.avec div#others_routes ul li p.username a:hover,.en.
descendant.de.plus.en.plus.profondément.avec.le.sélecteur,.jusqu’à.atteindre.l’élément.cible.
–.un.élément.que.possède.chaque.élément.antérieur.du.sélecteur..Le.résultat.est.présenté.à.
la.Figure 11.10.
Figure 11.10
Le conteneur initial
Members’ Routes.
Parfait..La.liste.de.randonnées.et.d’itinéraires.transmis.par.les.membres.prend.agréablement.
forme.et.nombreux.sont.ceux.qui.s’en.tiendraient.là..Tout.a.l’air.bien.soigné..Ah,.mais.attendez !.Nous.sommes.perfectionnistes.et.nous.disposons.de.puissants.styles.CSS..Pourquoi.
s’en.tenir.au.bon.quand.on.peut.atteindre.l’excellent ?
Dans.les.deux.exemples.suivants,.nous.allons.peaufiner.le.haut.et.le.bas.du.conteneur.des.
itinéraires.grâce.à.d’intéressantes.astuces.CSS..
La pseudo-classe :first-child
S’il.vous.est.déjà.arrivé.de.vous.demander.comment.cibler.la.première.lettre.ou.la.première.
ligne.d’un.bloc.de.texte,.sachez.qu’il.suffit.d’utiliser.une.pseudo-classe.comme.:first-letter.ou.:first-line..Ces.astuces.passionnantes.permettent.de.mettre.en.forme.des.éléments.
en.fonction.d’une.logique.simple..
La.pseudo-classe.:first-child.ne.cible.qu’un.élément.qui.est.lui-même.le.premier.enfant.
d’un.élément.conteneur..