web-dev-qa-db-ja.com

CSS3は最後の要素を取得します

次のコードから最後の要素（hr）を取得する方法：

<div>
    <div>
        <span class="hr"></span>
    </div>

    <div>
        <span class="hr"></span>
    </div>

    <div>
        <span class="hr"></span> <!-- I need this -->
    </div>
</div>

.hr:last-childはこれでは機能しません。

もちろん、DOM構造はもっと複雑になる可能性があります。最後に必要な要素を取得するだけです。

csscss-selectors
25
Alex Ivasyuv

あなたの質問は完全に明確ではありません。例から最後の.hr要素を取得する方法はいくつかありますが、「DOM構造はより複雑になる可能性があります」と言います。あなたの質問に答えるために、あなたはどんな可能なDOM構造を持つことができるかを言及する必要があります。可能な場合もあれば、そうでない場合もあります。

最後のdivから.hrを取得する1つの方法は次のとおりです。

div div:last-of-type .hr

次に、外側のdivの最後の子から.hrを取得する別の方法を示します。

div :last-child .hr

内部の内容に関係なく、ドキュメントから最後の.hr要素を取得する必要がある場合は、CSSでそれを行うことはできません。 CSSでは、最初、最後、または ん階層の特定のレベルにある要素の場合、ネストされているものに関係なく、あるタイプの最後の要素を選択することはできません。

60
Brian Campbell
div:last-child .hr
5
Delan Azabani

次のセレクターが機能するはずです。

div *:last-child *:last-child

デモ： https://jsfiddle.net/78w3bofg/1/

3
Dylan Gordon