Absolut letztes Element auswählen

Question

Ich versuche das absolut letzte Element mit einer Klasse auszuwählen. Dies kann in vielen Elementen verschachtelt werden, es kann sein eigenes Element irgendwo auf der Seite sein, es kann buchstäblich überall sein. Hier ist, was ich versucht habe:

https://jsfiddle.net/cztpog87/

HTML:

<div> 
    <div class="total"> 
     Money! 
    </div> 
    <div> 
     <div class="total"> 
      Money! 
     </div> 
    </div> 
    <div class="total"> 
     Money! 
    </div> 
</div> 
<div> 
    <div class="total"> 
     Money! 
    </div> 
    <div> 
     <div class="total"> 
      Money! 
     </div> 
    </div> 
    <div class="total"> 
     Money! 
    </div> 
    <div class="total"> 
     Money! 
    </div> 
</div> 

CSS:

.total:not(:last-of-type) { 
    display: none; 
} 

.total:not(:last-child) { 
    display: none; 
} 

Wie Sie sehen können, ist es nicht entfernen Sie alle Elemente. Es entfernt einige, aber definitiv nicht alle. Was ist der absolut beste Weg, ALLE außer den letzten zu entfernen? SASS ist auch willkommen.

Answer 1

Ganz einfach ist dies mit CSS nicht möglich, da es keine nth-of-class Wähler

Mit JQuery ist es selbst Einfachheit mit der .last Funktion.

$(".total").last().addClass("highlight");

.total.highlight { 
 
    color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <div class="total"> 
 
    Money! 
 
    </div> 
 
    <div> 
 
    <div class="total"> 
 
     Money! 
 
    </div> 
 
    </div> 
 
    <div class="total"> 
 
    Money! 
 
    </div> 
 
</div> 
 
<div> 
 
    <div class="total"> 
 
    Money! 
 
    </div> 
 
    <div> 
 
    <div class="total"> 
 
     Money! 
 
    </div> 
 
    </div> 
 
    <div class="total"> 
 
    Money! 
 
    </div> 
 
    <div class="total"> 
 
    Money! 
 
    </div> 
 
</div>

Answer 2

Leider ist es mit reinem CSS nicht möglich, also brauchst du ein wenig JavaScript.

var elems = document.querySelectorAll('.total'); 
 

 
if (elems.length) { 
 
    elems[elems.length - 1].className += ' total-last' 
 
}

.total { 
 
    background: yellow; 
 
} 
 

 
.total-last { 
 
    background: red; 
 
}

<div> 
 
    <div class="total"> 
 
     Money! 
 
    </div> 
 
    <div> 
 
     <div class="total"> 
 
      Money! 
 
     </div> 
 
    </div> 
 
    <div class="total"> 
 
     Money! 
 
    </div> 
 
</div> 
 
<div> 
 
    <div class="total"> 
 
     Money! 
 
    </div> 
 
    <div> 
 
     <div class="total"> 
 
      Money! 
 
     </div> 
 
    </div> 
 
    <div class="total"> 
 
     Money! 
 
    </div> 
 
    <div class="total"> 
 
     Money! 
 
    </div> 
 
</div>

Vergessen Sie nicht, Ihr Skript nach dem HTML-Elemente zu setzen, oder es nach domready auszuführen.