css - 再帰的な div レイアウトで最後の div を CSS で選択する

Question

以下の HTML では、どのように DIV depper (子を持たない) を選択できますか?

nth-last-child を使用できると思いますが、すべての div に最後 (および最初) があるため機能しません。:D

PD: より深い DIV で ID または CLASS プロパティを使用することはできません (それらは Web に存在する HTML ファイルであるため)

HTML:

<div class="base">
    <div>
        <div>
            <div>
                <div>
                    <!-- recursive divs (quantity not defined...) -->
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

残念ながら、CSS セレクターは親要素を参照できないため、子として s を持たない要素を確認することはできませんdiv。

jQuery を使用している場合は、次のようにして要素を見つけることができます。

$('.base :not(:has(*))').addClass('deepest');​

デモ: http://jsfiddle.net/EhZax/

Answer 2

Javascript を使用する必要があります。jQuery を使用した例を次に示します。

$('.base *').filter(function(){
    return ! $(this).find('> *').length;
});

ここで実際に見てください：http://jsfiddle.net/E6sec/

---

更新::sterile必要に応じて、独自のセレクターを作成できます。次に例を示します。

jQuery.expr[':'].sterile = function(el) {
    return ! el.children.length;
};

その後、他の疑似セレクターと同じように使用できます。

$('.base :sterile');​

これがフィドルです：http://jsfiddle.net/FBw5q/

PSネイティブを使用したのは、jQuery のどのメソッドよりも高速だel.childrenからです。ただし、IE < 9 には、コメントが含まれます。それが気になる場合は、jQuery のメソッドを使用できます。childrenchildren()

Answer 3

そのためには Javascript が必要です。CSSだけでは無理