CSSセレクタ

目次
・CSSセレクタとは・CSSセレクタの基本・階層関係・フィルタ(基本) ・フィルタ(属性抽出) ・フィルタ(入力フォーム)

WEBページのレイアウトやデザインを扱う上で、CSS(Cascading Style Sheets カスケードスタイルシート)は、デザインスタイルを決定する重要なものです。
CSSの定義は、セレクタと各プロパティによって成り立ちます。

リスト1. CSSの基本形

#target, .targets, P {
	CSSプロパティ : 値;
}

上記の例で言えば、「#target, .target, P」がセレクタになります。

jQueryでは、このCSSセレクタの仕組みを利用することで、目的のDOMオブジェクトを容易に特定できるようにしています。

CSSセレクタの基本は、id、クラス、要素タグにより目的のDOMオブジェクトを特定することです。

「#id」 : idによる特定

DOMオブジェクトのid属性により、目的のDOMオブジェクトを特定します。
「getElementById('id')」に似ています。

リスト2. #id

<div id="sample2" class="Samples" >サンプル</div>
<script>
// id='smple2'のDOMオブジェクト
var sample2 = jQuery('#sample2').get();
// var sample2 = document.getElementById('sample2'); と同じ。
</script>

※DOMオブジェクトのid属性は、基本的に要素定義後は読み取り専用です。
　動的に生成したDOMオブジェクトでも、変更はできません。
　主に一意なDOMオブジェクトを特定するために用います。

「.class」 : クラスによる特定

DOMオブジェクトのclass属性により、目的のDOMオブジェクトを特定します。
html5より定義された「getElementsByClassName('class')」に似ています。

リスト3. #id

<div id="sample3_1" class="Samples Odd" >第1のサンプル</div>
<div id="sample3_2" class="Samples Even" >第2のサンプル</div>
<script>
// クラスに'Samples'を含むDOMオブジェクト
var samples = jQuery('.Samples').get();
// var samples = document.getElementsByClassName('Samples'); と同じ。

// 奇数のjQueryオブジェクト
var odd = jQuery('.Odd');

// 偶数のjQueryオブジェクト
var Even = jQuery('.Even');
</script>

※DOMオブジェクトのclass属性は、id属性と異なり、書き換えが可能です。
　また1つの要素に複数のクラスを定義することが可能です。
　そのため、jQueryではクラスによる指定がよく使われます。

TAG : 要素タグによる特定

DOMオブジェクトの要素タグ(tagName属性)により、目的のDOMオブジェクトを特定します。
「getElementsByTagName('TAG')」に似ています。

リスト4. 要素タグ

<div id="sample4" class="Samples" >第1のサンプル</div>
<script>
// 全div要素のDOMオブジェクト
var divs = jQuery('div').get();
// var divs = document.getElementsByTagName('div'); と同じ。
</script>

※DOMオブジェクトの要素タグは、id属性同様に要素定義後は読み取り専用です。
　動的に生成したDOMオブジェクトでも、変更はできません。
　主に同じ要素を一括して変化させたり、イベントを追加するために用います。

「*」 : 全ての選択

親オブジェクト内の全てのDOMオブジェクトを対象とします。

リスト5. 全てを選択

<script>
// 全要素のDOMオブジェクト
var All = jQuery('*').get();

// 全要素の書体を'ＭＳ 明朝'に変更
function AllSerif(){
	All.css('font-family','ＭＳ 明朝');
}
</script>

※主にコンテンツ内を一括して変化させたり、イベントを追加するために用います。

セレクタ,セレクタ,... : セレクタの列記

複数のセレクタで指定される対象を、セレクタを列記することで、一つのJQueryオブジェクトとします。

リスト6. セレクタの列記

<dl id="sample5_dl">
	<dt class="Samples">定義リスト-1</dl>
	<dd class="Samples">...</dd>
</dl>
<dl id="sample5_ul">
	<li class="Samples">箇条書きリスト-1</li>
</ul>
<script>
// 全要素のDOMオブジェクト
var Lists = jQuery('dt.Samples,li.Samples').get();

// Samplesクラスの見出しと箇条書きにアンダーラインを引く。
function UnderLines(){
	Lists.css('text-decoration','underline');
}
</script>

※複数の条件を一括して処理する場合に使います。
　なお、順序はその時々によります。

CSSは、各DOMオブジェクトの上下関係を「階層(カスケード)」としています。
この階層関係により、複雑なDOMオブジェクトの指定を、容易にできるようにしています。
jQueryでも、CSSの「階層(カスケード)」を用いてDOMオブジェクトの指定を行うことができます。

「ancestor descendant」 : 子孫関係による階層

セレクタ ancestor(先祖)の配下にあるセレクタ descendant(子孫) のDOMオブジェクトを特定します。
descendant は、ancestorの直下でなくても構いません。

リスト7. 子孫関係

<dl id="sample7">
	<dt>項目7-1</dt>
	<dd><dl>
		<dt>項目7-1-1</dt>
		<dd>...</dd>
		<dt>項目7-1-2</dt>
		<dd>...</dd>
		<dt>項目7-1-3</dt>
		<dd>...</dd>
	</dl></dd>
	<dt>項目7-2</dt>
	<dd><dl>
		<dt>項目7-2-1</dt>
		<dd>...</dd>
		<dt>項目7-2-2</dt>
		<dd>...</dd>
		<dt>項目7-2-3</dt>
		<dd>...</dd>
	</dl></dd>
</dl>
<script>
// id='smple7'内のdt要素
var sample7 = jQuery('#sample7 dt').get();
</script>

実装例

項目7-1

項目7-1-1: ...
項目7-1-2: ...
項目7-1-3: ...

項目7-2

項目7-2-1: ...
項目7-2-2: ...
項目7-2-3: ...

「parent > child」 : 親子関係による階層

セレクタ parent(親)の直下にあるセレクタ child(子) のDOMオブジェクトを特定します。
child は、parentの直下に限られます。

リスト8. 親子関係

<dl id="sample8">
	<dt>項目8-1</dt>
	<dd><dl>
		<dt>項目8-1-1</dt>
		<dd>...</dd>
		<dt>項目8-1-2</dt>
		<dd>...</dd>
		<dt>項目8-1-3</dt>
		<dd>...</dd>
	</dl></dd>
	<dt>項目8-2</dt>
	<dd><dl>
		<dt>項目8-2-1</dt>
		<dd>...</dd>
		<dt>項目8-2-2</dt>
		<dd>...</dd>
		<dt>項目8-2-3</dt>
		<dd>...</dd>
	</dl></dd>
</dl>
<script>
// id='smple8'内のdt要素
var sample8 = jQuery('#sample8 dt').get();
</script>

実装例

項目8-1

項目8-1-1: ...
項目8-1-2: ...
項目8-1-3: ...

項目8-2

項目8-2-1: ...
項目8-2-2: ...
項目8-2-3: ...

「target + next」 : 前後関係による階層

セレクタ targetの後にあるセレクタ next のDOMオブジェクトを特定します。

リスト9. 前後関係

<dl id="sample9">
	<dt>項目9-1</dt>
	<dd><dl>
		<dt>項目9-1-1</dt>
		<dd>...</dd>
		<dt id="myItem9" >項目9-1-2</dt>
		<dd>...</dd>
		<dt>項目9-1-3</dt>
		<dd>...</dd>
	</dl></dd>
	<dt>項目9-2</dt>
	<dd><dl>
		<dt>項目9-2-1</dt>
		<dd>...</dd>
		<dt>項目9-2-2</dt>
		<dd>...</dd>
		<dt>項目9-2-3</dt>
		<dd>...</dd>
	</dl></dd>
</dl>
<script>
// id='myItem'の次の要素
var myItem9 = jQuery('#myItem9 + *').get();
</script>

実装例

項目9-1

項目9-1-1: ここは赤くなりません。
項目9-1-2: ここは赤くなります。
項目9-1-3: ここは赤くなりません。

項目9-2

項目9-2-1: ここは赤くなりません。
項目9-2-2: ここは赤くなりません。
項目9-2-3: ここは赤くなりません。

「target ~ siblings」 : 兄弟関係による階層

セレクタ targetと同じ階層にあるセレクタ siblings のDOMオブジェクトを特定します。

リスト10. 兄弟関係

<dl id="sample10">
	<dt>項目10-1</dt>
	<dd><dl>
		<dt>項目10-1-1</dt>
		<dd>...</dd>
		<dt id="myItem10" >項目10-1-2</dt>
		<dd>...</dd>
		<dt>項目10-1-3</dt>
		<dd>...</dd>
	</dl></dd>
	<dt>項目10-2</dt>
	<dd><dl>
		<dt>項目10-2-1</dt>
		<dd>...</dd>
		<dt>項目10-2-2</dt>
		<dd>...</dd>
		<dt>項目10-2-3</dt>
		<dd>...</dd>
	</dl></dd>
</dl>
<script>
// id='myItem'と兄弟のdd要素
var myItem10 = jQuery('#myItem10 ~ dd').get();
</script>

実装例

項目10-1

項目10-1-1: ここは赤くなりません。
項目10-1-2: ここは赤くなります。
項目10-1-3: ここは赤くなります。

項目10-2

項目10-2-1: ここは赤くなりません。
項目10-2-2: ここは赤くなりません。
項目10-2-3: ここは赤くなりません。

上記のセレクタに「:(フィルタ)」をつけることにより、選択したDOMオブジェクトを更に絞り込むことができます。
CSS(CSS3を含む)で使用可能なフィルタに加えてjQuery特有のものもございます。
下記はその基本的なフィルタです。

「selector:first」 : 最初のオブジェクト

セレクタ selectorで選択されたDOMオブジェクトのうち、最初のものを特定します。

「selector:last」 : 最後のオブジェクト

セレクタ selectorで選択されたDOMオブジェクトのうち、最後のものを特定します。

「selector:not(selector2)」 : 除外するオブジェクト

セレクタ selectorで選択されたDOMオブジェクトのうち、selector2で無いものを特定します。

「selector:odd」 : 奇数番目のオブジェクト

セレクタ selectorで選択されたDOMオブジェクトのうち、奇数番目のものを特定します。
※最初のオブジェクトのindexは、0です。

「selector:even」 : 偶数番目のオブジェクト

セレクタ selectorで選択されたDOMオブジェクトのうち、偶数番目のものを特定します。
※最初のオブジェクトのindexは、0です。

「selector:eq(index)」 : index番目のオブジェクト

セレクタ selectorで選択されたDOMオブジェクトのうち、index番目のものを特定します。
※最初のオブジェクトのindexは、0です。

「selector:gt(index)」 : index番目後のオブジェクト

セレクタ selectorで選択されたDOMオブジェクトのうち、index番目より後からを特定します。
※最初のオブジェクトのindexは、0です。

「selector:lt(index)」 : index番目までのオブジェクト

セレクタ selectorで選択されたDOMオブジェクトのうち、index番目より前までを特定します。
※最初のオブジェクトのindexは、0です。

「selector:header」 : h1～h6

セレクタ selectorで選択されたDOMオブジェクトのうち、h1～h6要素を特定します。

「selector:animated」 : jQueryアニメーションオブジェクト

セレクタ selectorで選択されたDOMオブジェクトのうち、jQueryでアニメーション中のものを特定します。

「selector:contains(text)」 : 内容を含むオブジェクト

セレクタ selectorで選択されたDOMオブジェクトのうち、textをコンテンツに含むものを特定します。

「selector:empty」 : 空のオブジェクト

セレクタ selectorで選択されたDOMオブジェクトのうち、空要素を特定します。

「selector:has(selector2)」 : 空のオブジェクト

セレクタ selectorで選択されたDOMオブジェクトのうち、selector2で指定した子孫要素を持つものを特定します。

「selector:parent」 : 親となるオブジェクト

セレクタ selectorで選択されたDOMオブジェクトの親要素を特定します。

「selector:hidden」 : 非表示のオブジェクト

セレクタ selectorで選択されたDOMオブジェクトのうち、非表示のものを特定します。
input要素の「type="hidden"」も含まれます。

「selector:visible」 : 非表示のオブジェクト

セレクタ selectorで選択されたDOMオブジェクトのうち、可視要素を特定します。

「selector:nth-child(index/odd/even/equation)」 : 特定子要素のオブジェクト

セレクタ selectorで選択されたDOMオブジェクトの子要素のうち、出現順によって特定します。
親

index: index番目を特定します。
※indexは1～の整数
odd: 奇数番目を特定します。
※indexは1～の整数
even: 偶数番目を特定します。
※indexは1～の整数
equation: 式に従って子要素を特定します。
※indexは1～の整数

「selector:first-child」 : 最初の子要素のオブジェクト

セレクタ selectorで選択されたDOMオブジェクトの子要素のうち、出現順が最初のものを特定します。

「selector:last-child」 : 最後の子要素のオブジェクト

セレクタ selectorで選択されたDOMオブジェクトの子要素のうち、出現順が最後のものを特定します。

「selector:only-child」 : 一つだけの子要素のオブジェクト

セレクタ selectorで選択されたDOMオブジェクトの子要素のうち、一つだけのものを特定します。

リスト11. フィルタ(基本)

// 基本フィルタの実行
function Sample11(sw){
	jQuery('#sample11 *').css('background-color','');
	switch( sw ){
		// 最初のtd要素
		case ':first':
			jQuery('#sample11 td:first').css('background-color','skyblue');
			break;
		// 最後のtd要素
		case ':last':
			jQuery('#sample11 td:last').css('background-color','skyblue');
			break;
		// #tr2を除くのtr要素
		case ':not':
			jQuery('#sample11 tr:not(#tr2)').css('background-color','skyblue');
			break;
		// 奇数行(最初は0行)
		case ':odd':
			jQuery('#sample11 tr:odd').css('background-color','skyblue');
			break;
		// 偶数行(最初は0行)
		case ':even':
			jQuery('#sample11 tr:even').css('background-color','skyblue');
			break;
		// 5番目のtd要素(0から始まるので、index=4)
		case ':eq':
			jQuery('#sample11 td:eq(4)').css('background-color','skyblue');
			break;
		// 5番目より前のtd要素(0から始まるので、index=4)
		case ':lt':
			jQuery('#sample11 td:lt(4)').css('background-color','skyblue');
			break;
		// 5番目より後のtd要素(0から始まるので、index=4)
		case ':gt':
			jQuery('#sample11 td:gt(4)').css('background-color','skyblue');
			break;
		// 「番目」を持つtd要素
		case ':contains':
			jQuery('#sample11 td:contains(番目)').css('background-color','skyblue');
			break;
		// 空のtd要素
		case ':empty':
			jQuery('#sample11 td:empty').css('background-color','skyblue');
			break;
		// 要素を持つtd要素
		case ':has':
			jQuery('#sample11 td:has(*)').css('background-color','skyblue');
			break;
		// b要素の親要素
		case ':parent':
			jQuery('#sample11 b:parent').css('background-color','skyblue');
			break;
		// 隠し要素
		case ':hidden':
			hiddenTR = jQuery('#sample11 *:hidden');
			hiddenTR.show();
			break;
		// 可視要素
		case ':visible':
			jQuery('#sample11 td:visible').css('background-color','skyblue');
			break;
		// 各行2番目の子要素
		case ':nth-child(index)':
			jQuery('#sample11 td:nth-child(2)').css('background-color','skyblue');
			break;
		// 各行奇数番目の子要素
		case ':nth-child(odd)':
			jQuery('#sample11 td:nth-child(odd)').css('background-color','skyblue');
			break;
		// 各行偶数番目の子要素
		case ':nth-child(even)':
			jQuery('#sample11 td:nth-child(even)').css('background-color','skyblue');
			break;
		// 各行3n番目の子要素
		case ':nth-child(equation)':
			jQuery('#sample11 td:nth-child(3n)').css('background-color','skyblue');
			break;
		// 各行最初の子要素
		case ':first-child':
			jQuery('#sample11 th:first-child').css('background-color','skyblue');
			break;
		// 各行最後の子要素
		case ':last-child':
			jQuery('#sample11 td:last-child').css('background-color','skyblue');
			break;
		// 各行一つしかない子要素
		case ':last-child':
			jQuery('#sample11 th:only-child').css('background-color','skyblue');
			break;
		// 初期化
		default:
			try{
				hiddenTR.hide();
			}
			catch(e){}
			break;
	}
}

実装例

	第1列	第2列	第3列
第1行	1番目	要素あり
第2行		5番目
第3行	隠れていました。
第4行		不可視	ラスト
第5行

各要素の属性によりDOMオブジェクトを特定するフィルタです。

「selector[attribute]」 : 属性を持つオブジェクト: セレクタ selectorで選択されたDOMオブジェクトのうち、属性 attributeを持つものを特定します。
「selector[attribute=value]」 : 属性値が一致するオブジェクト: セレクタ selectorで選択されたDOMオブジェクトのうち、属性 attributeの値がvalueであるものを特定します。
「selector[attribute!=value]」 : 属性値が一致しないオブジェクト: セレクタ selectorで選択されたDOMオブジェクトのうち、属性 attributeの値がvalueでないものを特定します。
「selector[attribute^=value]」 : 文字列で前方一致するオブジェクト: セレクタ selectorで選択されたDOMオブジェクトのうち、属性 attributeの値がvalueで始まるものを特定します。
「selector[attribute$=value]」 : 文字列で後方一致するオブジェクト: セレクタ selectorで選択されたDOMオブジェクトのうち、属性 attributeの値がvalueで終わるものを特定します。
「selector[attribute*=value]」 : 文字列を含むオブジェクト: セレクタ selectorで選択されたDOMオブジェクトのうち、属性 attributeの値がvalueを含むものを特定します。
「selector[attribute1]...[attributeN]」 : 複数属性フィルタに対応するオブジェクト: セレクタ selectorで選択されたDOMオブジェクトのうち、属性フィルタ attribute1～attributeNに対応するものを特定します。

リスト12. フィルタ(属性抽出)

// 属性抽出の実行
function Sample12(sw){
	jQuery('#sample12 li').css('background-color','');
	switch( sw ){
		// title属性がある項目
		case '存在':
			jQuery('#sample12 li[title]').css('background-color','skyblue');
			break;
		// title属性が"2番目"の項目
		case '=':
			jQuery('#sample12 li[title=2番目]').css('background-color','skyblue');
			break;
		// title属性が"2番目"でない項目
		case '!':
			jQuery('#sample12 li[title!=2番目]').css('background-color','skyblue');
			break;
		// title属性が"「"で始まる項目
		case '^':
			jQuery('#sample12 li[title^=「]').css('background-color','skyblue');
			break;
		// title属性が"目」"で終わる項目
		case '$':
			jQuery('#sample12 li[title$=目」]').css('background-color','skyblue');
			break;
		// title属性が"番目"を含む項目
		case '*':
			jQuery('#sample12 li[title*=番目]').css('background-color','skyblue');
			break;
		// title属性が"最"を含み、"最後"でない項目
		case '複数':
			jQuery('#sample12 li[title*=最][title!=最後]').css('background-color','skyblue');
			break;
		default:
			break;
	}
}

実装例

最初の項目
2番目の項目
3番目の項目
4番目の項目(title属性無し)
最後の項目

入力フォームのDOMオブジェクトを特定するフィルタです。

「selector:input」 : input要素及びtextarea要素、select要素、button要素のオブジェクト

セレクタ selectorで選択されたDOMオブジェクトのうち、input要素及びtextarea要素、select要素、button要素を特定します。

「selector:type」 : type属性を指定したinput要素のオブジェクト

セレクタ selectorで選択されたDOMオブジェクトのうち、input要素のtype属性により特定します。
「selector input[type=value]」と同等です。

text: 「type="text"」のinput要素
password: 「type="password"」のinput要素
radio: 「type="radio"」のinput要素
checkbox: 「type="checkbox"」のinput要素
submit: 「type="submit"」のinput要素
image: 「type="image"」のinput要素
reset: 「type="reset"」のinput要素
button: 「type="button"」のinput要素
file: 「type="file"」のinput要素
hidden: 「type="hidden"」のinput要素

「selector:enabled」 : 利用可能な入力フォーム要素のオブジェクト

セレクタ selectorで選択されたDOMオブジェクトのうち、利用可能な入力フォーム要素を特定します。
「selector:disabled」と反対のものを特定します。

「selector:disabled」 : 利用不可な入力フォーム要素のオブジェクト

セレクタ selectorで選択されたDOMオブジェクトのうち、利用不可な入力フォーム要素を特定します。
「selector:enabled」と反対のものを特定します。

「selector:checked」 : チェックの入った入力フォーム要素のオブジェクト

セレクタ selectorで選択されたDOMオブジェクトのうち、チェックの入った入力フォーム要素を特定します。

「selector:selected」 : 選択された入った入力フォーム要素のオブジェクト

セレクタ selectorで選択されたDOMオブジェクトのうち、選択された入力フォーム要素を特定します。

リスト13. フィルタ(入力フォーム)

// 入力フォーム抽出の実行
function Sample13(sw){
	jQuery('#sample13 *').css('background-color','');
	switch( sw ){
		// 入力フォーム
		case 'input':
			jQuery('#sample13 *:input').css('background-color','skyblue');
			break;
		// テキスト入力
		case 'text':
			jQuery('#sample13 *:text').css('background-color','skyblue');
			break;
		// パスワード入力
		case 'password':
			jQuery('#sample13 *:password').css('background-color','skyblue');
			break;
		// ラジオボタン
		case 'radio':
			jQuery('#sample13 *:radio').fadeOut(1000,function(){jQuery(this).show();});
			break;
		// チェックボックス
		case 'checkbox':
			jQuery('#sample13 *:checkbox').fadeOut(1000,function(){jQuery(this).show();});
			break;
		// submitボタン
		case 'submit':
			jQuery('#sample13 *:submit').css('background-color','skyblue');
			break;
		// resetボタン
		case 'reset':
			jQuery('#sample13 *:reset').css('background-color','skyblue');
			break;
		// ボタン
		case 'button':
			jQuery('#sample13 *:button').css('background-color','skyblue');
			break;
		// 利用可能
		case 'enabled':
			jQuery('#sample13 *:enabled').fadeOut(1000,function(){jQuery(this).show();});
			break;
		// 利用不可
		case 'disabled':
			jQuery('#sample13 *:disabled').fadeOut(1000,function(){jQuery(this).show();});
			break;
		// チェック
		case 'checked':
			jQuery('#sample13 *:checked').fadeOut(1000,function(){jQuery(this).show();});
			break;
		// 選択
		case 'selected':
			jQuery('#sample13 *:selected').fadeOut(1000,function(){jQuery(this).show();});
			break;
		default:
			break;
	}
}

実装例