jQuery入門道場 jQueryの使い方

2章 セレクター

階層構造によるセレクター

ここでは、階層構造に基づくjQueryのセレクター(CSSのセレクター)を見て行きましょう。

子孫セレクター

ある要素の中にある要素(全て)を選択する場合に使います。半角スペースで階層構造を分けます。

$("h2 strong")
$("p.intro a")

1番目は、h2要素の中にある全てのstrong要素を選択します。2番目は、クラス名introのついたp要素の中にあるリンク全てを選択します。

子セレクター

ある要素の中にある要素(全て)を選択する場合に使いますが、上記の子孫セレクターと異なり、直下の子供だけが選択対象になります。 大なり記号(>)を使います。

$("body > h2")

このようにある場合、body直下のh2要素のみを選択します。 もしh2を他のdivの中に入れていた場合は、選択対象になりません。

<body>
  <h2>ここは対象</h2>
  <div>
    <h2>ここは対象外</h2>
  </div>
</body>

この大なり記号(>)、いかにも親と子(大と小)という感じがしますね。

隣接兄弟セレクター(Adjacent Sibling)

隣接している兄弟で、後ろ側にある方が選択対象になります。プラス記号(+)を使います。
兄弟ですので、まず同じ親を共有していなければなりません。また隣接(隣同士)でなければなりません。
例えば、

$("h2 + p")

とある場合、h2のすぐ後に出てくるp要素を選択します。 具体的に見てみましょう。

<h2>宇宙について</h2>
<p>パラグラフ1</p>
<p>パラグラフ2</p>
<p>パラグラフ3</p>
 
<h2>地球について</h2>
<p>パラグラフ4</p>
<p>パラグラフ5</p>
<p>パラグラフ6</p>
 
<h2>平和について</h2>
<div>DIVです</div>
<p>パラグラフ7</p>
<p>パラグラフ8</p>
<p>パラグラフ9</p>
$("h2 + p").css("color", "red");

実行結果は、次のようになります。「パラグラフ7」は、h2と隣接していなので選択対象外です。

このプラス記号(+)、いかにも、くっついている感がありますね。

一般兄弟セレクター(General Sibling)

隣接兄弟セレクターと似ていますが、こちらは、隣接している必要がありません。後ろ側にあれば選択対象になります(但し、前側は対象外です)。記号は、チルダ(~)を使います。
具体例を見てみましょう。HTMLは、兄弟隣接の時と比べdivの中(12行目)だけを変更しています。

<h2>宇宙について</h2>
<p>パラグラフ1</p>
<p>パラグラフ2</p>
<p>パラグラフ3</p>
 
<h2>地球について</h2>
<p>パラグラフ4</p>
<p>パラグラフ5</p>
<p>パラグラフ6</p>
 
<h2>平和について</h2>
<div><p>中にあるパラグラフ</p></div>
<p>パラグラフ7</p>
<p>パラグラフ8</p>
<p>パラグラフ9</p>
$("h2 ~ p").css("color", "red");

実行結果は、次のようになります。ほとんどのパラグラフが赤になっていますが、divの中に入ったパラグラフだけは兄弟ではないので、対象外になっています。

このチルダ記号(~)、多少離れていてもOK感があるように見えます。
ちなみに、一般兄弟と訳しましたが、まだこの日本語訳自体、一般的ではありません。 またちなみに、先の隣接兄弟セレクターは、CSS2で定義されていますが、こちらの一般兄弟セレクターは、CSS3で定義されています。