cibler le dernier élement d’une liste

Petit mémo pour rappeler la technique css pour cibler par exemple, dans une liste d’articles avec une barre horizontale (<hr>)de séparation sous chaque article, le dernier article ou dernièr <hr/>

Sur WordPress, la loop est généralement appelée dans un fichier archive ou caregory ou index, qui renvoie pour le contenu vers un fichier ‘content-‘.A la fin de ce fichier j’insère un hr pour le retrouver sous chaque article

Actualités « Invest AM

Comme on le voit on a une barre sous chaque article, sauf le dernier.Au cas ou un last-child ou nth-child ne marcherait pas, pensez à « last-of-type »!

.archive article:last-of-type + hr {display:none;}

De la meme manière, dans mon petit tuto sur la création d’une barre d’etape pour un formulaire par exemple, le dernier rond n’a pas de barre à sa droite.

rond

la barre je la place en background d’ un pseudo-element  et je l’annule pour le dernier rond avec un ‘last-of-type’

.numberCircle:after{  content: "";display: inline-block;height: 1px;background-color: #c9a64f; max-width: 100%;position: absolute;margin-right: 16px;margin-left: 44px;margin-top: .5em;vertical-align: middle;padding: 0px;width: 52px;}
.numberCircle:after:last-child{content:"";display:none;height:0}

 

Laisser un commentaire

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

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.