属性セレクター

特定の属性を持つ要素のみを指定することが出来、
[]で指定します。

【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>

属性セレクターサンプル

属性の値の1文字目を指定することが出来、
^で指定します。

【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>

属性セレクターサンプル

1文字目が「f」かつ、「th」で終わる属性のみスタイルが適用されます。

This entry was written by admin , posted on 水曜日 4月 13 2011at 10:04 am , filed under CSS and tagged . Bookmark the permalink . Post a comment below or leave a trackback: Trackback URL.

Comments are closed.