$(function(){ /* [Attribute] */ //ul liでclassを持った要素だけ赤くする $("ul.attribute-01 li[class]").css("color", "red"); /* [Attribute="value"] */ //ul liでclass='eg-02 sub04'を持った要素だけ赤くする $("ul.attribute-02 li[class='eg-02 sub04']").css("color", "red"); /* [Attribute!="value"] */ //ul liでclass='eg-01 sub03'を持った要素以外を赤くする $("ul.attribute-03 li[class!='eg-01 sub03']").css("color", "red"); /* [Attribute^="value"] */ //ul liでclass名がegで始まる要素を赤くする $("ul.attribute-04 li[class^='eg']").css("color", "red"); /* [Attribute$="value"] */ //ul liでclass名が04で終わる要素を赤くする $("ul.attribute-05 li[class$='04']").css("color", "red"); /* [Attribute*=value] */ //ul liでclass名にg-0が含まれる要素を赤くする $("ul.attribute-06 li[class*='g-0']").css("color", "red"); /* [Attribute~="value"] */ //ul liでclass名にsub04が含まれる要素を赤くする $("ul.attribute-07 li[class~='sub04']").css("color", "red"); /* [Attribute|="value"] */ //ul liでclass名がegまたはeg-**を含む要素を赤くする $("ul.attribute-08 li[class|='eg']").css("color", "red"); /* [Attribute="value"][Attribute="value02"] */ //ul liでclass='eg-02 sub04で、idも含んでいる要素を赤くする $("ul.attribute-09 li[class='eg-02 sub04'][id]").css("color", "red"); //end });
<h2 class="clear">[Attribute]</h2> <ul class="attribute-01"> <li>list0</li> <li class="eg01 sub03">list1</li> <li>list2</li> <li class="eg02 sub04">list3</li> </ul> <h2 class="clear">[Attribute="value"]</h2> <ul class="attribute-02"> <li>list0</li> <li class="eg-01 sub03">list1</li> <li>list2</li> <li class="eg-02 sub04">list3</li> </ul> <h2 class="clear">[Attribute!="value"]</h2> <ul class="attribute-03"> <li>list0</li> <li class="eg-01 sub03">list1</li> <li>list2</li> <li class="eg-02 sub04">list3</li> </ul> <h2 class="clear">[Attribute^="value"]</h2> <ul class="attribute-04"> <li>list0</li> <li class="eg-01 sub03">list1</li> <li>list2</li> <li class="eg-02 sub04">list3</li> </ul> <h2 class="clear">[Attribute$="value"]</h2> <ul class="attribute-05"> <li>list0</li> <li class="eg-01 sub03">list1</li> <li>list2</li> <li class="eg-02 sub04">list3</li> </ul> <h2 class="clear">[Attribute*=value]</h2> <ul class="attribute-06"> <li>list0</li> <li class="eg-01 sub03">list1</li> <li>list2</li> <li class="eg-02 sub04">list3</li> </ul> <h2 class="clear">[Attribute~=value]</h2> <ul class="attribute-07"> <li>list0</li> <li class="eg-01 sub03">list1</li> <li>list2</li> <li class="eg-02 sub04">list3</li> </ul> <h2 class="clear">[Attribute|=value]</h2> <ul class="attribute-08"> <li>list0</li> <li class="eg-01 sub03">list1</li> <li>list2</li> <li class="eg-02 sub04">list3</li> </ul> <h2 class="clear">[Attribute=value][Attribute=value02]・・・</h2> <ul class="attribute-09"> <li>list0</li> <li class="eg-01 sub03">list1</li> <li>list2</li> <li class="eg-02 sub04" id="09">list3</li> </ul>
.clear{clear:both;} h2{padding:15px 0 5px 10px; font-size:20px; color:blue; border-top:1px solid #eee; } ul{margin:15px;} li{padding:2px 0;}