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

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 :

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.

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>Affiliation</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 :

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>Affiliation</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 :

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.