Last-child : Le dernier élément ayant une classe spécifique

Par Marc TABARIES, il y a 7 ans

Les bases HTML/CSS

Bonjour,

Je cherche à sélectionner le dernier élément ayant la class .img :

<div class="parent"> <div class="text">bla text</div> <div class="img">bla img</div> <div class="img">bla img</div> <div class="img">bla img</div> <div class="text">bla txt</div> <div class="img">bla img</div> <div class="img">bla img</div> <div class="img">bla img</div> <!-- CET ÉLÉMENT --> <div class="text">bla txt</div> </div>

Pour cela, je comptais utiliser la pseudo-classe "last-child"... mais cela ne fonctionne pas, à cause du fait que l'élément .img n'est pas à proprement parler le dernier élément de l'élément .parent (je suppose).

À tester ici-même : https://jsfiddle.net/byuoznpe/

Si quelqu'un a une solution, je suis preneur.

Bonne fin de journée.

4 réponses

YiuJia, il y a 7 ans

Il faut attendre le CSS4 pour que cela soit possible en CSS.

Avec javascript, tu peux faire ceci :

var aParents = document.getElementsByClassName('parent'); for (var i = 0; i < aParents.length; i++) { var aImgs = aParents[i].getElementsByClassName('img'); var lastImg = aImgs[aImgs.length - 1]; lastImg.style.color = 'white'; lastImg.style.fontWeight = 700; lastImg.style.backgroundColor = 'red'; }
Marc TABARIES, il y a 7 ans

Ok, merci pour ce retour.

Je n'avais même pas pensé à utiliser du JS. Je trouve ça un peu dommage que cela ne fonctionne pas pour le moment avec last-child ou en "CSS pur".

Si c'est la seule solution... je me demande si je ne avais mettre une bonne vieille seconde balise du genre "img last".

En tous les cas, merci pour ton retour.

massadu33, il y a 6 ans

Bonjour,
Je sais pas si c'est toujours d'actualité mais voici une solution :

div.parent > div:nth-last-child(2) { color: red; }
alain_47, il y a 6 ans
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>selector by attribute</title> <style> .parent{margin-top: 20px; text-align: center; line-height: 30px;} div[class="img"]:nth-last-of-type(2){font-weight: bold; color:orange;} </style> </head> <body> <div class="parent"> <div class="text">classe text</div> <div class="img">classe img</div> <div class="img">classe img</div> <div class="img">classe img</div> <div class="text">classe txt</div> <div class="img">classe img</div> <div class="img">classe img</div> <div class="img">- classe img -</div> <!-- CET ÉLÉMENT --> <div class="text">classe text</div> </div> </body> </html>