115
Mise en forme des listes et création de barres de navigation
Les.éléments.de.la.liste.s’affichent.maintenant.tous.horizontalement.et.vous.pouvez.commencer.à.leur.appliquer.un.traitement.graphique..Dans.cet.exemple,.nous.souhaitons.que.
tous.les.numéros.de.page.apparaissent.dans.un.carré.avec.un.arrière-plan.gris..Lorsque.l’utilisateur.survole.ces.liens,.l’arrière-plan.doit.passer.en.bleu.et.le.texte.du.lien.devenir.blanc.
ol.pagination a,
ol.pagination li.selected {
display: block;
padding: 0.2em 0.5em;
border: 1px solid #ccc;
text-decoration: none;
}
ol.pagination a:hover,
ol.pagination a:focus,
ol.pagination li.selected {
background-color: blue;
color: white;
}
Voilà.qui.est.parfait.pour.les.numéros.de.page,.mais.nous.voulons.donner.une.mise.en.forme.
légèrement.différente.aux.liens.Précédent.et.Suivant..Pour.cela,.nous.allons.cibler.leur.attribut.rel.avec.des.sélecteurs.d’attributs..Pour.commencer,.je.ne.souhaite.pas.que.ces.liens.
aient.un.effet.de.bordure..Je.le.désactive.donc.
ol.pagination a[rel="prev"],
ol.pagination a[rel="next"] {
border: none;
}
Je.voudrais.aussi.ajouter.une.flèche.de.présentation.au.début.et.à.la.fin.de.la.liste..On.peut.
les.intégrer.directement.dans.le.code.HTML,.mais.il.est.aussi.possible.de.les.injecter.avec.
des.CSS,.afin.de.pouvoir.les.modifier.ou.les.supprimer.par.la.suite..Pour.utiliser.des.CSS,.
servez-vous. des. pseudo-sélecteurs. :before. et. :after. en. combinaison. avec. la. propriété.
content..
ol.pagination a[rel="prev"]:before {
content: "\00AB";
padding-right: 0.5em;
}
ol.pagination a[rel="next"]:after {
content: "\00BB";
padding-left: 0.5em;
}
La.première.déclaration.cible.le.lien.d’ancre.au.début.de.la.liste.et.ajoute,.avant.lui,.une.
double.flèche.vers.la.gauche.avec.le.code.de.caractère."00AB"..La.seconde.déclaration.cible.
le.dernier.lien.d’ancre.et.ajoute.une.double.flèche.droite.à.la.fin.
Et.voilà.le.résultat :.une.barre.de.navigation.paginée.horizontale.simple.mais.flexible.