絶対最後の要素を選択

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では不可能です。

$(".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後にそれを実行しないでください。 .last機能を持つjQueryのそれのシンプルそのものとはnth-of-classセレクタ

がないよう