prev ~ siblings


version 1.0 以降

解説

要素prevと同じ親要素を持ち、要素prev以降に出現する要素siblingsにマッチします。

記法

prev (セレクタ) ~ siblings(セレクタ)

prev(セレクタ)の後ろに"~"チルダで区切り、siblings(セレクタ)を指定します。 要素prevと同じ親要素を持ち、要素prev以降に出現する要素siblingsにマッチします。

概念図

parent

prev
siblings (セレクタ: "prev ~ siblings")
siblings (セレクタ: "prev ~ siblings")

例

例1:class属性値が"river"のdiv要素と同じ親要素を持ち、以降に出現するspan要素を選択し、背景を水色にします。 

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


ページトップヘページトップヘ

ページトップヘページトップヘ