初めてのjQuery：セレクターAPIを一挙解説（後編）

4．CSSの属性セレクター

　jQueryは、CSSの属性セレクターの多くにも対応しています。属性セレクターとは、要素の持つ属性の条件で絞り込めるセレクターです。[...] の内側に属性の条件を記述します。

■[attribute]

　特定の属性を持つ要素を指定できるセレクターです。

▼サンプルコード（HTML部分）

<ul>
    <li id="first">テキストテキストテキストテキストテキスト</li>
    <li class="second">テキストテキストテキストテキストテキスト</li>
    <li id="third">テキストテキストテキストテキストテキスト</li>
    <li class="fourth">テキストテキストテキストテキストテキスト</li>
</ul>

▼サンプルコード（スクリプト部分）

$(function(){
    $("[id]").css("color","red");
})

▼実行結果（実際のWebページ）

　id属性を持つ要素、つまり1行目と3行目のli要素が赤色になります。

■[attribute='value']

　特定の属性が、特定の値を持つ要素を指定できるセレクターです。

▼サンプルコード（HTML部分）

<ul>
    <li title="first">テキストテキストテキストテキストテキスト</li>
    <li title="second">テキストテキストテキストテキストテキスト</li>
    <li title="third">テキストテキストテキストテキストテキスト</li>
    <li title="fourth">テキストテキストテキストテキストテキスト</li>
</ul>

▼サンプルコード（スクリプト部分）

$(function(){
    $("[title='second']").css("color","red");
})

▼実行結果（実際のWebページ）

　title属性の値がsecondの要素、つまり2行目のli要素が赤色になります。

■[attribute!='value']

　特定の属性が、特定の値を持たない要素を指定できるセレクターです。このセレクターは要素セレクターの後に記述する必要があります。

▼サンプルコード（HTML部分）

<ul>
    <li title="first">テキストテキストテキストテキストテキスト</li>
    <li title="second">テキストテキストテキストテキストテキスト</li>
    <li title="third">テキストテキストテキストテキストテキスト</li>
    <li title="fourth">テキストテキストテキストテキストテキスト</li>
</ul>

▼サンプルコード（スクリプト部分）

$(function(){
    $("li[title!='first']").css("color","red");
})

▼実行結果（実際のWebページ）

　title属性の値がfirst以外のli要素、つまり1行目以外のli要素が赤色になります。

■[attribute^='value']

　特定の属性の値が、特定の文字列で始まっている要素を指定できます。

▼サンプルコード（HTML部分）

<ul>
    <li title="first">テキストテキストテキストテキストテキスト</li>
    <li title="second">テキストテキストテキストテキストテキスト</li>
    <li title="third">テキストテキストテキストテキストテキスト</li>
    <li title="fourth">テキストテキストテキストテキストテキスト</li>
</ul>

▼サンプルコード（スクリプト部分）

$(function(){
    $("[title^='f']").css("color","red");
})

▼実行結果（実際のWebページ）

　title属性の値がfで始まる文字列である要素、つまり1行目と4行目のli要素が赤色になります。

■[attribute$='value']

　特定の属性の値が、特定の文字列で終わっている要素を指定できます。

▼サンプルコード（HTML部分）

<ul>
    <li title="first">テキストテキストテキストテキストテキスト</li>
    <li title="second">テキストテキストテキストテキストテキスト</li>
    <li title="third">テキストテキストテキストテキストテキスト</li>
    <li title="fourth">テキストテキストテキストテキストテキスト</li>
</ul>

▼サンプルコード（スクリプト部分）

$(function(){
    $("[title$='d']").css("color","red");
})

▼実行結果（実際のWebページ）

　title属性がdで終わっている文字列である要素、つまり2行目と3行目のli要素が赤色になります。

■[attribute*='value']

　特定の属性が、特定の文字列を含んでいる要素を指定できます。

▼サンプルコード（HTML部分）

<ul>
    <li title="first">テキストテキストテキストテキストテキスト</li>
    <li title="second">テキストテキストテキストテキストテキスト</li>
    <li title="third">テキストテキストテキストテキストテキスト</li>
    <li title="fourth">テキストテキストテキストテキストテキスト</li>
</ul>

▼サンプルコード（スクリプト部分）

$(function(){
    $("[title*='ir']").css("color","red");
})

▼実行結果（実際のWebページ）

　title属性がirを含む文字列である要素、つまり1行目と3行目のli要素が赤くなります。

■[attributeFilter1][attributeFilter2]

　複数の属性セレクターを同時に指定することもできます。

▼サンプルコード（HTML部分）

<ul>
    <li title="first">テキストテキストテキストテキストテキスト</li>
    <li title="second">テキストテキストテキストテキストテキスト</li>
    <li title="third">テキストテキストテキストテキストテキスト</li>
    <li title="fourth">テキストテキストテキストテキストテキスト</li>
</ul>

▼サンプルコード（スクリプト部分）

$(function(){
$("[title^='f'][title*='th']").css("color","red");
})

▼実行結果（実際のWebページ）

　title属性がfから始まり、かつtitle属性にthが含まれる文字列である要素、つまり4行目のli要素が赤色になります。

headerフィルター

　「headerフィルター」は、h1～h6までのheading要素をまとめて指定できるフィルターです。

▼サンプルコード（HTML部分）

<h1>テキストテキストテキストテキストテキスト</h1>
<p>テキストテキストテキストテキストテキスト</p>
<h6>テキストテキストテキストテキストテキスト</h6>

▼サンプルコード（スクリプト部分）

$(function(){
    $(":header").css("color","red");
})

▼実行結果（実際のWebページ）

　1行目のh1要素、3行目のh6要素が赤色になります。

■containsフィルター / hasフィルター

　「containsフィルター」は特定の文字列が含まれている要素を、「hasフィルター」は特定の要素が含まれている要素を指定できます。

▼サンプルコード（HTML部分）

<ul>
    <li><strong>テキスト</strong>テキストテキストテキストテキスト</li>
    <li>テキストテキストテキストテキストテキスト</li>
    <li>テキストテキストテキストテキストテキスト</li>
    <li>サンプルサンプルサンプルサンプルサンプル</li>
</ul>

▼サンプルコード（スクリプト部分）

$(function(){
    $("li:contains('サンプル')").css("color","red");
    $("li:has(strong)").css("color","red");
})

▼実行結果（実際のWebページ）

　「サンプル」という文字列が含まれる4番目のli要素と、strong要素を含む最初のli要素が赤色になります。

■parentフィルター

　「parentフィルター」は、子要素やテキストを含む要素を指定できるフィルターです。CSS3セレクターで紹介したempty擬似クラスと逆のフィルターです。

▼サンプルコード（HTML部分）

<ul>
    <li>テキストテキストテキストテキストテキスト</li>
    <li></li>
    <li>テキストテキストテキストテキストテキスト</li>
    <li></li>
</ul>

▼サンプルコード（スクリプト部分）

$(function(){
    $("li:parent").css("color","red");
})

▼実行結果（実際のWebページ）

　空のli要素以外のli要素、つまり1行目と3行目が赤色になります。

セレクターAPIのまとめ

　ここまでに紹介したとおり、jQueryではさまざまなセレクターを利用して(X)HTMLの要素を指定できます。最後に、jQueryで使えるセレクターをまとめておきましょう（表中の「要素」はセレクターで指定された要素です）。

名称	書式	指定対象
CSSでよく利用されるセレクター
要素セレクター	$("要素名")	特定のhtml要素
IDセレクター	$("#ID名")	特定のid属性の値を持つ要素
クラスセレクター	$(".クラス名")	特定のclass属性の値を持つ要素
子孫セレクター	$("要素1 要素2")	特定の要素の内側にある要素
ユニバーサルセレクター	$("*")	すべての要素
グループセレクター	$("セレクター1,セレクター2,...")	複数のセレクター
CSS2のセレクター
子セレクター	$("親要素名 > 子要素名")	特定の要素の直下の子要素
隣接セレクター	$("要素1 + 要素2")	特定の要素の次の要素
first-child擬似クラス	$("要素:first-child")	特定の要素内の最初の要素
CSS3のセレクター
間接セレクター	$("要素1 ~ 要素2")	特定の要素の後に出現する要素
否定擬似クラス	$("要素1:not(要素2)")	特定の要素内の指定した要素以外の要素
empty擬似クラス	$("要素:empty")	子要素やテキストを含まない要素
nth-child擬似クラス	$("要素:nth-child(番号)")	特定の要素内の指定した番号の要素
last-child擬似クラス	$("要素:last-child")	特定の要素内の最後の要素
only-child擬似クラス	$("要素:only-child")	指定した要素が1つだけ含まれる特定の要素
CSSの属性セレクター
[attribute]	$("[属性名]")	特定の属性を持つ要素
[attribute='value']	$("[属性名='値']")	特定の属性が指定した値を持つ要素
[attribute!='value']	$("要素名[属性名!='値']")	特定の属性が指定した値を持たない要素
[attribute^='value']	$("[属性名^='値']")	特定の属性が特定した値で始まっている要素
[attribute$='value']	$("[属性名$='値']")	特定の属性が特定した値で終わっている要素
[attribute*='value']	$("[属性名*='値']")	特定の属性が特定した値を含んでいる要素
[attributeFilter1][attributeFilter2]	$("[属性セレクター1][属性セレクター2]")	複数の属性セレクターに該当する要素
jQueryの独自フィルター
firstフィルター	$("要素:first")	指定した要素の最初の要素
lastフィルター	$("要素:last")	指定した要素の最後の要素
evenフィルター	$("要素:even")	指定した要素の偶数番目の要素
oddフィルター	$("要素:odd")	指定した要素の奇数番目の要素
eqフィルター	$("要素:eq(番号)")	指定した番号の要素（番号は0から数える）
gtフィルター	$("要素:gt(番号)")	指定した番号より後の要素（番号は0から数える）
ltフィルター	$("要素:lt(番号)")	指定した番号より前の要素（番号は0から数える）
headerフィルター	$("要素:header")	h1～h6までのheader要素
containsフィルター	$("要素:contains(文字列)")	特定の文字列が含まれている要素
hasフィルター	$("要素1:had(要素2)")	特定の要素が含まれている要素
parentフィルター	$("要素:parent")	子要素やテキストを含む要素

◆

　次回は、セレクターで指定した要素の(X)HTMLやCSSを変更する、さまざまな方法をご紹介します。