CSS last child : cibler le dernier élément d’une liste en CSS3

Partagez si vous aimez ->

En CSS, on est souvent amener à styler une liste à puce HTML pour en faire un menu horizontal ou vertical. Voici une astuce, grâce à la propriété css last-child pour faciliter votre design.

Quand on construit un menu sur un site web, on utilise une liste à puce en HTML. Or, cette liste s’affiche par défaut (c’est à dire sans qu’on ait rien à faire) de cette façon :

liste html sans css

Bien souvent, vous allez en modifier le design afin d’obtenir une liste horizontale. Vous voudrez aussi séparer chaque entrée du menu par un séparateur vertical, comme sur l’image suivante.

Illustration de l'utilisation de la propriété css last child sur une liste à puce

Comme vous pouvez le constater, la petite barre apparaît à droite du mot « Mentions légales », puis à droite du mot « Affiliation » et rien pour le dernier mot. Ce comportement, qui n’est pas standard, peut être réalisé simplement grâce à la propriété css last child.

Avant tout, voyons les étapes :

  • 1/ afficher une barre à droite d’un élément de menu
  • 2/ ensuite nous verrons comment la supprimer sur le dernier élément

Et le tour sera joué !

Le code CSS qui nous permet d’afficher un séparateur à droite de chaque mot du menu

Tout d’abord, considérons le code html suivant :

<ul>
 	<li><a href="/mentions-legales/">Mentions légales</a></li>
 	<li><a href="/affiliation/">Affiliation</a></li>
 	<li><a href="/contact/">Contact</a></li>
</ul>

Le code CSS qui permet d’afficher une barre à droite de chaque « li » est en fait la propriété « border » (bordure). Nous l’utilisons pour cibler la bordure droite spécifiquement.

ul li {
border-right: solid 1px #fff; /* Place une bordure blanche de 1 pixel à droite */
}

Et voici le résultat visuel de cette liste stylée en css :

liste avec css sauf last child

Le problème avec ce code est qu’une barre apparaît aussi sur le dernier élément. Nous allons utiliser la propriété CSS « last-child » pour désigner spécifiquement cet élément et y annuler la bordure.

Comment cibler le dernier li uniquement avec last child ?

ul li:last-child {
border: none 0; /* Annule toutes les bordures pour le dernier li */
}

Le code total pour afficher une bordure entre chaque élément de menu grâce à la propriété CSS last-child

Code HTML

<ul>
 	<li><a href="/mentions-legales/">Mentions légales</a></li>
 	<li><a href="/affiliation/">Affiliation</a></li>
 	<li><a href="/contact/">Contact</a></li>
</ul>

Code CSS utilisant last child

ul li {
border-right: solid 1px #fff; /* Place une bordure blanche de 1 pixel à droite */
}
ul li:last-child {
border: none 0; /* Annule toutes les bordures pour le dernier li */
}

Pour le plaisir, voici le résultat final, que nous avions aussi dans l’introduction de cet article :

Illustration de l'utilisation de la propriété css last child sur une liste à puce

Remarque : en fonction de votre design, il sera parfois utile de cibler l’élément « a » à l’intérieur du « li » plutôt que le « li » lui-même.

Partagez si vous aimez ->

Youcef

Concepteur de Sites Web et entrepreneur, l'écriture et la pédagogie font aussi partie de mes passions. Mon objectif est de vous aider à trouver la solution idéale pour créer votre propre Site Internet.

Vous aimerez aussi...

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Simple Share Buttons