jQuery
特定の属性が、特定の文字列を含んでいる要素を指定できる。
<script type="text/javascript">
$(function(){
$("[title*='ir']").css("color","#9cf");
});
</script>
<ul> <li title="first">テキスト1テキスト1テキスト1</li> <li title="second">テキスト2テキスト2テキスト2</li> <li title="third">テキスト3テキスト3テキスト3</li> <li title="fourth">テキスト4テキスト4テキスト4</li> </ul>
title属性の値に「ir」を含む要素、つまり1番目と3番目のli要素が#9cfになる。
特定の属性の値が、特定の文字列で終わっている要素を選択できる。
<script type="text/javascript">
$(function(){
$("[title$='d']").css("color","#9cf");
});
</script>
<ul> <li title="first">テキスト1テキスト1テキスト1</li> <li title="second">テキスト2テキスト2テキスト2</li> <li title="third">テキスト3テキスト3テキスト3</li> <li title="fourth">テキスト4テキスト4テキスト4</li> </ul>
title属性の値が「d」で終わっている要素、つまり2番目と3番目のli要素が#9cfの色になる。
特定の属性の値が、特定の文字列で始まっている要素を選択できる。
<script type="text/javascript">
$(function(){
$("[title^='f']").css("color","#9cf");
});
</script>
<ul> <li title="first">テキスト1テキスト1テキスト1</li> <li title="second">テキスト2テキスト2テキスト2</li> <li title="third">テキスト3テキスト3テキスト3</li> <li title="fourth">テキスト4テキスト4テキスト4</li> </ul>
title属性の値が「f」で始まる要素、つまり1番目と4番目のli要素が#9cfの色になる。
特定の属性が、特定の値を持たない要素を選択できるセレクター。([属性='value']の反対の意)
このセレクターは要素セレクターの後に続けて記述する必要がある。
<script type="text/javascript">
$(function(){
$("li[title!='first']").css("color","#9cf");
});
</script>
<ul> <li title="first">テキスト1テキスト1テキスト1</li> <li title="second">テキスト2テキスト2テキスト2</li> <li title="third">テキスト3テキスト3テキスト3</li> <li title="fourth">テキスト4テキスト4テキスト4</li> </ul>
title属性の値が「first」以外のli要素（1番目以外のli要素）が#9cfの色になる。
特定の属性が、特定の値を持つ要素を選択できるセレクター。
<script type="text/javascript">
$(function(){
$("[title='second']").css("color","#9cf");
});
</script>
<ul> <li title="first">テキスト1テキスト1テキスト1</li> <li title="second">テキスト2テキスト2テキスト2</li> <li title="third">テキスト3テキスト3テキスト3</li> <li title="fourth">テキスト4テキスト4テキスト4</li> </ul>
title属性の値が「second」の要素、つまり2番目のli要素が#9cfの色になる。
