jQuery でセレクターの指定2
前回jQueryでセレクター指定の記事を書いたのですが まだセレクターについて書くことがあったので記載していきます。
前回の記事はこちらになります。 nonaka-katuma-hal.hatenablog.com
初期状態はこのようになっているものとします。
HTML
<ul> <li>テキストテキスト</li> <li>テキストテキスト</li> <li>テキストテキスト</li> <li>テキストテキスト</li> </ul>
1.ユニバーサルセレクター
全ての要素を選択するもので*(アスタリスク)で記述します。
HTML
<ul> <li><a>テキスト</a>テキスト</li> <li><a>テキストテキスト</a></li> <li><a>テキストテキスト</a>テキスト</li> <li>テキストテキスト</li> </ul>
$(function() { $("li *").css("color","red"); });
li要素内に含まれる全ての要素、つまりaタグで囲まれたものが赤色になります。
2.グループセレクター
複数のセレクターを,(カンマ)区切りで並べて指定できるのがグループセレクターです。 それぞれのセレクターに対する命令をまとめて記述出来ます。
HTML
<ul> <li id="first">テキストテキスト</li> <li id="second">テキストテキスト</li> <li id="third">テキストテキスト</li> <li id="fourth">テキストテキスト</li> </ul>
$(function() { $("#second , #fourth").css("color","red"); });
id属性がsecondの2番目とfourthの4番目のli要素が赤色になります。
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>
$(function() { $("#first > a").css("color","red"); });
1行目2行目のidがfirstの直下のaタグに囲まれた文字だけ赤色になります。 3行目のaタグに囲まれた文字はdivの直下になっているので赤色になりません。
4.隣接セレクター
特定の要素の次に出現する要素を選択できるのが「隣接セレクター」です。 隣接セレクターは隣接する要素を+(プラス)で指定します。
HTML
<ul> <li id="first">テキストテキスト</li> <li id="second">テキストテキスト</li> <li id="third">テキストテキスト</li> <li id="fourth">テキストテキスト</li> </ul>
$(function() { $("#second + li").css("color","red"); });
id属性がsecondの要素の次に出現するli要素、つまり3行目のli要素が赤色になります。
これらのセレクターをどんどん使っていきたいと思います。