jQuery
jQueryは、要素の属性や属性値を条件に絞り込める「属性セレクター」にも対応している。
それぞれ [...] 内に条件を記述して使う。
特定の属性を持つ要素を選択できるセレクター。
<script type="text/javascript">
$(function(){
$("[id]").css("color","#9cf")
});
</script>
<ul> <li id="first">テキスト1テキスト1テキスト1</li> <li class="second">テキスト2テキスト2テキスト2</li> <li id="third">テキスト3テキスト3テキスト3</li> <li class="fourth">テキスト4テキスト4テキスト4</li> </ul>
id属性を持つ要素（1番目と3番目のli要素）が#9cfの色になる。
セレクターに特定の要素が１つだけ含まれる場合、「only-child擬似クラス」で選択できる。
セレクターの後ろに“:only-child”と記述する。
<script type="text/javascript">
$(function(){
$("span:only-child").css("color","#9cf");
});
</script>
<ul> <li><span>テキスト1</span>テキスト1テキスト1</li> <li><span>テキスト2</span>テキスト2<span>テキスト2</span></li> <li>テキスト3テキスト3テキスト3</li> <li>テキスト4テキスト4テキスト4</li> </ul>
1番目のspan要素だけが#9cfの色になる。
2番目のli要素にはspan要素が複数含まれるため、対象にならない。
下記は上記ソースコードの結果、
特定のセレクターの中で最後の要素を選択できるのが、「last-child擬似クラス」。
セレクターの後ろに“:last-child”と記述する。
<script type="text/javascript">
$(function(){
$("li:last-child").css("color","#9cf")
});
</script>
<ul> <li>テキスト1テキスト1テキスト1</li> <li>テキスト2テキスト2テキスト2</li> <li>テキスト3テキスト3テキスト3</li> <li>テキスト4テキスト4テキスト4</li> </ul>
最後のli要素(ここでは4番目のli要素)だけが#9cfの色になる。
下記は上記ソースコードの結果、
セレクターの要素から任意番号の要素だけを選択できるのが「nth-child擬似クラス」。
セレクターの後ろに“：nth-child(番号)”と記述する。
<script type="text/javascript">
$(function(){
$("li:nth-child(3)").css("color","#9cf");
});
</script>
<ul> <li>テキスト1テキスト1テキスト1</li> <li>テキスト2テキスト2テキスト2</li> <li>テキスト3テキスト3テキスト3</li> <li>テキスト4テキスト4テキスト4</li> </ul>
3番目のli要素だけが#9cfの色になる。
下記は上記ソースコードの結果、
子要素やテキストを含まない要素を選択できるのが、「empty擬似クラス」。
セレクターの後ろに“:empty”と記述する。
<script type="text/javascript">
$(function(){
$("li:empty").css("color","#9cf")
});
</script>
<ul> <li>テキスト1キスト1キスト1</li> <li></li> <li>テキスト2キスト2キスト2</li> <li></li> </ul>
空のli要素、つまり2番目と4番目のli要素が#9cfの色になる。
下記は上記ソースコードの結果、
