属性セレクター
特定の属性を持つ要素のみを指定することが出来、
[]で指定します。
【jQuery】
<script type=”text/javascript”>
$(function(){
$(“[id]”).css(“color”,”#FF0000″);
});
</script>
【HTML】
<ul>
<li id=”first”>米ドル</li>
<li class=”second”>ユーロ</li>
<li id=”third”>豪ドル</li>
<li class=”fourth”>英ポンド</li>
<li id=”fifth”>南アランド</li>
</ul>
特定の属性が特定の値を持つことを指定出来、
[]内に値を指定します。
【jQuery】
<script type=”text/javascript”>
$(function(){
$(“[title=’fourth’]”).css(“color”,”#FF0000″);
});
</script>
【HTML】
<ul>
<li title=”first”>米ドル</li>
<li title=”second”>ユーロ</li>
<li title=”third”>豪ドル</li>
<li title=”fourth”>英ポンド</li>
<li title=”fifth”>南アランド</li>
</ul>
特定の値以外を持つことを指定出来、
!を使います。
この場合はセレクター名は省略できず、
[]の前に指定します。
【jQuery】
<script type=”text/javascript”>
$(function(){
$(“li[title!=’fourth’]”).css(“color”,”#FF0000″);
});
</script>
【HTML】
<ul>
<li title=”first”>米ドル</li>
<li title=”second”>ユーロ</li>
<li title=”third”>豪ドル</li>
<li title=”fourth”>英ポンド</li>
<li title=”fifth”>南アランド</li>
</ul>
属性セレクターサンプル
属性の値の１文字目を指定することが出来、
^で指定します。
【jQuery】
<script type=”text/javascript”>
$(function(){
$(“[title^=’f’]”).css(“color”,”#FF0000″);
});
</script>
【HTML】
<ul>
<li title=”first”>米ドル</li>
<li title=”second”>ユーロ</li>
<li title=”third”>豪ドル</li>
<li title=”fourth”>英ポンド</li>
<li title=”fifth”>南アランド</li>
</ul>
属性セレクターサンプル
属性の値の最後の文字を指定することが出来、
$で指定します。
【jQuery】
<script type=”text/javascript”>
$(function(){
$(“[title$=’d’]”).css(“color”,”#FF0000″);
});
</script>
【HTML】
<ul>
<li title=”first”>米ドル</li>
<li title=”second”>ユーロ</li>
<li title=”third”>豪ドル</li>
<li title=”fourth”>英ポンド</li>
<li title=”fifth”>南アランド</li>
</ul>
属性セレクターサンプル
属性に特定の文字を含んでいることを指定出来、
*で指定します。
【jQuery】
<script type=”text/javascript”>
$(function(){
$(“[title*=’ir’]”).css(“color”,”#FF0000″);
});
</script>
【HTML】
<ul>
<li title=”first”>米ドル</li>
<li title=”second”>ユーロ</li>
<li title=”third”>豪ドル</li>
<li title=”fourth”>英ポンド</li>
<li title=”fifth”>南アランド</li>
</ul>
属性セレクターサンプル
複数の属性を一度に指定することが出来、
必要な数だけ並べて指定します。
【jQuery】
<script type=”text/javascript”>
$(function(){
$(“[title^=’f’][title*=’th’]”).css(“color”,”#FF0000″);
});
</script>
【HTML】
<ul>
<li title=”first”>米ドル</li>
<li title=”second”>ユーロ</li>
<li title=”third”>豪ドル</li>
<li title=”fourth”>英ポンド</li>
<li title=”fifth”>南アランド</li>
</ul>
属性セレクターサンプル
１文字目が「f」かつ、「th」で終わる属性のみスタイルが適用されます。