ancestor descendant


version 1.0 以降

解説

要素ancestorの子孫要素descendantにマッチします。

記法

ancestor(セレクタ) descendant(セレクタ)

ancestor(セレクタ)の後ろに" "スペースで区切り、descendant(セレクタ)を指定します。 要素ancestorの子孫要素descendantにマッチします。

概念図

ancestor

descendant1 (セレクタ: "ancestor descendant1")
descendant2 (セレクタ: "ancestor descendant2")

例1:class属性値が"sea"の要素の子孫span要素を選択し、背景を水色にします。

$(".sea span").css("background-color", "aqua");

<div class="sea">
    class属性値が"sea"div要素

    <span>span要素</span>
    <div class="river">
        class属性値が"river"div要素
        <span>span要素</span>
    </div>
    <span>span要素</span>
    <span>span要素</span>
    <div>
        div要素
        <span>span要素</span>
    </div>
    <span>span要素</span>
</div>