［jQuery］セレクターの種類
⑴ どのHTML・CSSの要素を操作するかをセレクターで指定し
⑵ 操作する内容を書く
$ ( function( ) {
$ ( 'セレクター' ) . jQueryの命令
} ) ;
例： $ ( function() {
$ ('li').css('color','red')
});
・・・CSSのｌｉ要素のcolorプロパティを赤に変更
する
要素セレクター
<body>
<ul>
<li>１番目の要素</li>
<li>２番目の要素</li>
<li>３番目の要素</li>
<li>４番目の要素</li>
</ul>
<script>
$ ( function() {
$ ('li').css('color','red')
});
</script>
</body>
《表示結果》
IDセレクター
ＩＤ属性を指定する場合は、$ ( ' # id名 ' )と、id属性の値に#（ハッシュ）をつけたものをセレクターとする
<ul>
<li id="first">１番目の要素</li>
<li id="second">２番目の要素</li>
<li id="third">３番目の要素</li>
<li id="fourth">４番目の要素</li>
</ul>
<script>
$ ( function( ) {
$ ( ' li #second ' ).css ( ' color ' , ' red ' )
} ) ;
</script>
《表示結果》
クラスセレクター
クラス属性を指定する場合は、$ ( ' . class名 ' )と、class属性の値に.（ドット）をつけたものをセレクターとする
<ul>
<li class="first">１番目の要素</li>
<li class="second">２番目の要素</li>
<li class="third">３番目の要素</li>
<li class="fourth">４番目の要素</li>
</ul>
<script>
$ ( function( ) {
$ ( ' li.third ' ) .css( ' color ' , ' blue ' )
} ) ;
《表示結果》
子孫セレクター
○ id属性の直下（子）の別の属性を指定するには、セレクタ名を半角スペースで区切る
<ul>
<li id="first"><strong>１番目の要素</strong> テキスト</li>
<li id="second"><strong>２番目の要素</strong> テキスト</li>
<li id="third"><strong>３番目の要素</strong> テキスト</li>
<li id="fourth"><strong>４番目の要素</strong> テキスト</li>
</ul>
<script>
$ ( function() {
$ ('.third strong').css('color','blue')
});
⇒ id名「third」の子のstrong要素だけに、colorプロパティの変更が適用される
《表示結果》
○ idの直下（子）の特定の要素全てに対しては、＞を使うこともできる（CSS2.1から）
<div class="memo">
<p class="test"><strong>１番目の要素</strong> テキスト</p>
<p><strong>２番目の要素</strong> テキスト</p>
<p class="test">３番目の要素 テキスト</p>
<p>４番目の要素 テキスト</p>
</div>
<script>
<script>
$ ( function( ) {
$ (' .memo > .test ' ).css( 'color','blue')
} ) ;
⇒ class名memoの子のclass名testだけにcolorプロパティの変更が適用される
《表示結果》
隣接セレクター（CSS2.1）
特定の要素の次に出現する要素を+で指定する。
<ul>
<li class="first">１番目の要素 テキスト</li>
<li class="second">２番目の要素 テキスト</li>
<li class="third">３番目の要素 テキスト</li>
<li class="fourth">４番目の要素 テキスト</li>
</ul>
<script>
$ ( function( ) {
$ ( '.second + li ' ).css( 'color','blue' )
} ) ;
・・・class名secondの次のli要素に、colorプロパティの変更が適用される
《表示結果》
グループセレクター
<ul>
<li id="first">１番目の要素 テキスト</li>
<li id="second">２番目の要素 テキスト</li>
<li id="third">３番目の要素 テキスト</li>
<li id="fourth">４番目の要素 テキスト</li>
</ul>
<ul>
<li class="first">１番目の要素 テキスト</li>
<li class="second">２番目の要素 テキスト</li>
<li class="third">３番目の要素 テキスト</li>
<li class="fourth">４番目の要素 テキスト</li>
</ul>
<script>
$ ( function( ) {
$ ( '#second, #fourth, .first ' ).css( 'color','blue' )
} ) ;
《表示結果》
ユニバーサルセレクター
特定の要素内にあるすべての要素を指定する
以下の例では、li要素以下にある要素になるため、li要素のみは含まれない
<ul>
<li id="first"><strong>１番目の要素 テキスト</strong></li>
<li id="second">２番目の要素 テキスト</li>
<li id="third">３番目の要素 テキスト</li>
<li id="fourth"><strong>４番目の要素</strong> テキスト</li>
</ul>
<ul>
<li class="first"><span>１番目の要素 テキスト</span></li>
<li class="second">２番目の要素 テキスト</li>
<li class="third"><strong>３番目の要素 テキスト</strong></li>
<li class="fourth">４番目の要素 テキスト</li>
</ul>
<script>
$ ( function( ) {
$ ( ' li * ' ).css( 'color','blue' )
} ) ;
first-child疑似クラス（CSS2.1）
特定の要素の中の、最初に登場する要素を指定する方法。要素名に：first-childをつける
<ul>
<li id="first">１番目の要素 テキスト</li>
<li id="second">２番目の要素 テキスト</li>
<li id="third">３番目の要素 テキスト</li>
<li id="fourth">４番目の要素 テキスト</li>
</ul>
<ul>
<li class="first">１番目の要素 テキスト</li>
<li class="second">２番目の要素 テキスト</li>
<li class="third">３番目の要素 テキスト</li>
<li class="fourth">４番目の要素 テキスト</li>
</ul>
<script>
$ ( function( ) {
$ ( 'li:first-child ' ).css( 'color','blue' )
} ) ;
《表示結果》
また、「$ ( ' li:first ' )」にすると次のようになるので注意
