Выберите абсолютный последний элемент

Question

Я пытаюсь выбрать абсолютный последний элемент с классом. Это может быть вложено внутри множества элементов, это может быть его собственный элемент где-то на странице, он может буквально быть где угодно. Вот что я пытался:

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; 
} 

Как вы можете видеть, он не удаляет все элементы. Он удаляет некоторые, но определенно не все. Каков абсолютный лучший способ удалить ВСЕ, кроме последнего? SASS также приветствуется.

Answer 1

Довольно просто это не представляется возможным с помощью CSS, как нет nth-of-class селектор

С Jquery это простота себя с функцией .last.

$(".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

К сожалению, это невозможно с чистым CSS, поэтому вам нужно немного 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>

Не забудьте поставить свой сценарий после того, как ваши HTML-элементов, или выполнить его после DOMReady.