セレクターに特定の要素が１つだけ含まれる場合、「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要素が複数含まれるため、対象にならない。
下記は上記ソースコードの結果、
- テキスト1テキスト1テキスト1
- テキスト2テキスト2テキスト2
- テキスト3テキスト3テキスト3
- テキスト4テキスト4テキスト4
2012/08/30 4:04 AM｜
カテゴリー ： jQuery｜
コメント
特定のセレクターの中で最後の要素を選択できるのが、「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の色になる。
下記は上記ソースコードの結果、
- テキスト1テキスト1テキスト1
- テキスト2テキスト2テキスト2
- テキスト3テキスト3テキスト3
- テキスト4テキスト4テキスト4
2012/08/30 3:49 AM｜
カテゴリー ： jQuery｜
コメント
セレクターの要素から任意番号の要素だけを選択できるのが「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の色になる。
下記は上記ソースコードの結果、
- テキスト1テキスト1テキスト1
- テキスト2テキスト2テキスト2
- テキスト3テキスト3テキスト3
- テキスト4テキスト4テキスト4
2012/08/30 3:44 AM｜
カテゴリー ： jQuery｜
コメント
子要素やテキストを含まない要素を選択できるのが、「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の色になる。
下記は上記ソースコードの結果、
- テキスト1キスト1キスト1
- テキスト2キスト2キスト2
2012/08/30 12:06 AM｜
カテゴリー ： jQuery｜
コメント
