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

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.

YiuJia

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

Auteur

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

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

<!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>

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

4 réponses