情弱エンジニアのなかのblog

一人前のエンジニアになる為のブログです

jQuery でセレクターの指定2

前回jQueryセレクター指定の記事を書いたのですが まだセレクターについて書くことがあったので記載していきます。

前回の記事はこちらになります。 nonaka-katuma-hal.hatenablog.com

初期状態はこのようになっているものとします。

HTML

<ul>
  <li>テキストテキスト</li>
  <li>テキストテキスト</li>
  <li>テキストテキスト</li>
  <li>テキストテキスト</li>
</ul>

f:id:nonaka-katuma-hal:20170921173002j:plain

1.ユニバーサルセレクタ

全ての要素を選択するもので*(アスタリスク)で記述します。

HTML

<ul>
  <li><a>テキスト</a>テキスト</li>
  <li><a>テキストテキスト</a></li>
  <li><a>テキストテキスト</a>テキスト</li>
  <li>テキストテキスト</li>
</ul>

jQuery

$(function() {
  $("li *").css("color","red");
});

li要素内に含まれる全ての要素、つまりaタグで囲まれたものが赤色になります。

f:id:nonaka-katuma-hal:20170921173800j:plain

2.グループセレクタ

複数のセレクターを,(カンマ)区切りで並べて指定できるのがグループセレクターです。 それぞれのセレクターに対する命令をまとめて記述出来ます。

HTML

<ul>
  <li id="first">テキストテキスト</li>
  <li id="second">テキストテキスト</li>
  <li id="third">テキストテキスト</li>
  <li id="fourth">テキストテキスト</li>
</ul>

jQuery

$(function() {
  $("#second , #fourth").css("color","red");
});

id属性がsecondの2番目とfourthの4番目のli要素が赤色になります。

f:id:nonaka-katuma-hal:20170921175959j:plain

3.子セレクタ

特定の要素の直下に配置された要素を選択できるのが「子セレクター」です。 子セレクターは親要素と子要素を「>」で結びます。

HTML

<ul>
  <li id="first"><a>テキスト</a>テキスト</li>
  <li id="first"><a>テキストテキスト</a></li>
  <li id="first"><div>テキスト<a>テキスト</a></div></li>
  <li id="second"><a>テキスト</a>テキスト</li>
</ul>

jQuery

$(function() {
  $("#first > a").css("color","red");
});

1行目2行目のidがfirstの直下のaタグに囲まれた文字だけ赤色になります。 3行目のaタグに囲まれた文字はdivの直下になっているので赤色になりません。

f:id:nonaka-katuma-hal:20170921183131j:plain

4.隣接セレクタ

特定の要素の次に出現する要素を選択できるのが「隣接セレクター」です。 隣接セレクターは隣接する要素を+(プラス)で指定します。

HTML

<ul>
  <li id="first">テキストテキスト</li>
  <li id="second">テキストテキスト</li>
  <li id="third">テキストテキスト</li>
  <li id="fourth">テキストテキスト</li>
</ul>

jQuery

$(function() {
  $("#second + li").css("color","red");
});

id属性がsecondの要素の次に出現するli要素、つまり3行目のli要素が赤色になります。

f:id:nonaka-katuma-hal:20170921182345j:plain

これらのセレクターをどんどん使っていきたいと思います。