複数のセレクターを” ,(カンマ) “区切りで並べて指定できるのが「グループセレクター」。
それぞれのセレクターに対する命令をまとめて記述できる。
class属性が「first」の1番目のli要素と、「third」が設定された3番目のli要素が#9cfの色になる。
<script type="text/javascript">
$(function(){
$("#one, #three").css("color","#9cf");
});
</script>
<ul> <li id="one">テキスト1テキスト1テキスト1</li> <li id="two">テキスト2テキスト2テキスト2</li> <li id="three">テキスト3テキスト3テキスト3</li> <li id="four">テキスト4テキスト4テキスト4</li> </ul>
下記は、上記ソースコードの結果。
すべての要素を選択できるのがユニバーサルセレクター。
ユニバーサルセレクターは“* (アスタリスク)”で記述する。
<script type="text/javascript">
$(function(){
$("li *").css("color","#9cf")
});
</script>
<ul> <li><strong>テキスト1</strong>テキスト1テキスト1</li> <li><em>テキスト2</em>テキスト2テキスト2</li> <li><span>テキスト3</span>テキスト3テキスト3</li> <li>テキスト4テキスト4テキスト4</li> </ul>
li要素に含まれているすべての要素、つまり１番目のstrong要素と2番目のem要素、
3番目のspan要素が「#9cf」の色になる。
以下は上記ソースコードの結果
「classセレクター」は、特定のclass属性を持つ要素に大して命令を実行する。
class属性の値に“.(ドット)”を付けたものをセレクターとして利用する。
<script type="text/javascript">
$(function(){
$(".second").css("color","#9cf");
});
</script>
<ul>
<li class="first">テキスト1、テキスト1、テキスト1</li>
<li class="second">テキスト2、テキスト2、テキスト2</li>
<li class="third">テキスト3、テキスト3、テキスト3</li>
<li class="fourth">テキスト4、テキスト4、テキスト4</li>
</ul>
下記は、上記ソースコードの結果。
