2012年08月
特定のセレクターの中で最後の要素を選択できるのが、「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の色になる。
下記は上記ソースコードの結果、
セレクター内の要素で特定の条件以外の要素を選択できるのが「否定擬似クラス」。
セレクターの後ろに“:not(…)”を付け、(…)内に除外する条件を記述する。
※ セレクターの後ろに” : “を付けて条件指定をする方法を、擬似クラスというんですね！
<script type="text/javascript">
$(function(){
$("li:not(:first-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要素(1番目のli要素)以外のli要素、
つまり2番目以降のli要素が#9cfの色になる。
下記は上記のソースコードの結果、
jQueryは、現在策定中のCSS3のセレクターの多くにも対応している。
特定のセレクターの後に出現する要素を選択できるのが「隣接セレクター」
セレクターの要素を、“~（チルダ）”で結びます。
<script type="text/javascript">
$(function({
$("second ~ li").css("color", "#9cf");
});
</script>
<ul> <li id="first">テキスト1テキスト1テキスト1</li> <li id="second">テキスト2テキスト2テキスト2</li> <li id="third">テキスト3テキスト3テキスト3</li> <li id="fourth">テキスト4テキスト4テキスト4</li> </ul>
id属性に「second」が設定された要素の後ろに登場するli要素、
つまり3番目以降のli要素が#9cfの色になる。
下記は上記ソースコードの結果、
