【jQuery入門】様々なセレクタで要素を指定しよう【一覧あり】

この記事ではjQueryの「セレクタ」について解説します。

jQueryのセレクタは、CSSセレクタと同じでなので、CSSの知識があるなら問題なく理解できると思います。では早速見ていきましょう！

セレクタとは？

jQueryで処理をしたい要素を指定します。

セレクタの種類によって、処理をされる適用対象が変わります。

セレクタの種類

セレクタの種類は以下の通りです。

要素セレクタ

要素名で指定された要素全てが適用対象となります。

以下の場合、p要素が指定されているので、全てのp要素の文字色が赤色になります。

HTML

<div id="BOX">
  <p>要素1</p>
  <p>要素2</p>
  <p>要素3</p>
</div>

jQuery

$("p").css("color","red");

idセレクタ

指定されたid属性の値を持つ要素が適用対象となります。

以下の場合、id名BOXの要素の背景色がオレンジ色になります。

HTML

<div id="BOX">
  <p>要素1</p>
  <p>要素2</p>
  <p>要素3</p>
</div>

jQuery

$("#BOX").css("background","orange");

classセレクタ

指定されたclass属性の値を持つ要素が適用対象となります。

以下の場合、class名redの要素の背景色が青色になります。

HTML

<div id="BOX">
  <p class="red">要素1</p>
  <p>要素2</p>
  <p>要素3</p>
</div>

jQuery

$(".red").css("color","red");

ユニバーサルセレクタ

全ての要素が適用対象となります。

HTML

<div id="BOX">
  <p>要素1</p>
  <p>要素2</p>
  <p>要素3</p>
  <div id="BOX-INNER">
    <p>要素４</p>
  </div>
</div>

jQuery

$("*").css("color","red");

グループセレクタ

複数の要素が適用対象となります。

それぞれ要素セレクタやidセレクタ等を組み合わせることができます。

以下の場合、class名redの要素と、id名BOX-INNERの要素の文字色が赤色になります。

HTML

<div id="BOX">
  <p class="red">要素1</p>
  <p>要素2</p>
  <p>要素3</p>
  <div id="BOX-INNER">
    <p>要素４</p>
  </div>
</div>

jQuery

$(".red, #BOX-INNER").css("color","red");

子セレクタ

親要素の直下にある子要素が適用対象となります。

以下の場合、id名BOX要素の直下にあるp要素の文字色のみ赤色になります。

要素4はid名BOX要素の直下ではなく、id名BOX-INNERの中に入っているため、赤色にはなりません。

HTML

<div id="BOX">
  <p>要素1</p>
  <p>要素2</p>
  <p>要素3</p>
  <div id="BOX-INNER">
    <p>要素４</p>
  </div>
</div>

jQuery

$("#BOX > p").css("color","red");

子孫セレクタ

親要素内の全ての子要素が適用対象となります。

以下の場合、id名BOX要素内にある全てのp要素の文字色が赤色になります。

HTML

<div id="BOX">
  <p>要素1</p>
  <p>要素2</p>
  <p>要素3</p>
  <div id="BOX-INNER">
    <p>要素４</p>
  </div>
</div>

jQuery

$("#BOX  p").css("color","red");

隣接セレクタ

指定した要素と同一階層で直後に登場する要素が適用対象となります。

以下の場合、class名one要素の直後のp要素のみ文字色が赤色になります。

HTML

<div id="BOX">
  <p class="one">要素1</p>
  <p>要素2</p>
  <p>要素3</p>
  <div id="BOX-INNER">
    <p>要素４</p>
  </div>
</div>

jQuery

$(".one + p").css("color","red");

間接セレクタ

指定した要素と同一階層で後に登場する全ての要素が適用対象となります。

以下の場合、class名one要素と同一階層のp要素の文字色が赤色になります。

HTML

<div id="BOX">
  <p class="one">要素1</p>
  <p>要素2</p>
  <p>要素3</p>
  <div id="BOX-INNER">
    <p>要素４</p>
  </div>
</div>

jQuery

$(".one ~ p").css("color","red");

まとめ

この記事に書かれていることで、特に覚えておいて欲しいことは以下の1点です。

jQuery関係の記事は他にも書いているので、宜しければそちらもチェックしてみてください。