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

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 :

liste html sans css

Hou que c’est moche !

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.

A propos de MarieEve Louvel

Depuis 3 ans, je partage mes connaissances sur ce blog, pour les entrepreneurs désireux de créer leur site vitrine et/ou leur blog professionnel avec WordPress. Mon expérience professionnelle va de l'accompagnement à la formation, en passant par de la création de site ou de logiciel. Retrouvez mes cours en ligne sur mon site FeelWeb Formation [http://feelwebformation.com]

9 commentaires

  1. Je ne connaissais pas du tout l’option « last-child » en css, c’est très intéressant! Cela me servira beaucoup je pense, notamment lorsqu’il s’agira du design de certains blocs de navigation! Merci beaucoup pour l’astuce. A bientôt!

    Répondre
  2. Bonjour, j’ai rien à dire à propos de l’article , mais je me demandais si on avait pas dépasser la date mensuelle du podcast ?C’est chaque Dimanche de chaque mois ?

    Répondre
  3. Voila une petite astuce qui va me servir et qui va surtout rendre plus propre mon code :)

    Répondre
  4. Bonjour, C’est le 26 mars ou Février que tu rentre :-) je vois que les vacances sont dure à laisser :-) je comprend très bien que tu doit te dire et alors et si je rallonger d’un mois lol
    Bref nous voulons le podcast , nous voulons le podcast , nous voulons le podcast

    Répondre
    • Bonjour,

      Oui oui je suis bien revenue, mais j’ai oublié d’annoncer le prochain podcast ! Oups ! Je me rattrape ce vendredi. La publication, elle, est maintenue au dernier vendredi de ce mois. Merci du rappel ! :)

      Répondre
      • Heureux pour et de ton retour 😉 à très bientôt donc

  5. Bonjour MarieEve, et merci pour l’astuce ça faisait un petit moment que j’étais coincé ! Mais ce n’est plus le cas et grâce à votre blog! Bonne continuation à vous

    Répondre
  6. Merci pour ses petits conseils.
    Le CSS 3 m’a t’on dit est plus simple à mettre en place tout comme le HTML 5.

    Est ce vrai? Par ce que niveau code je suis un peu larguer.

    Répondre
    • Plus simple que quoi ? Que css 2 et html 4 ? On t’a menti mon ami ! Le fonctionnement et la logique sont les mêmes mais les nouvelles versions sont plus complètes. Allez, on peut dire que html5 est d’une certaine façon plus facile que html4 car il est plus sémantique, mais bon…ça fait pas une grande différence pour le débutant.

      Répondre

Soumettre un commentaire

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

This Blog will give regular Commentators DoFollow Status. Implemented from IT Blögg

EmailEmail
PrintPrint