12/1(木)：JQuery入門(3)

JQueryをマスターするための第一歩は「セレクター」。
５つの分類

CSSでよく利用されるセレクター
CSS2のセレクター
CSS3のセレクター
CSSの属性セレクター
JQueryの独自フィルター

そのうちの

２．CSS2のセレクター

IE6など、一部のWEBブラウザが対応してないCSS2であるが
IE6も世界のブラウザシェアの8.3%とかなり減少しているものの
まだまだ残っている。（※The Internet Explorer 6 Countdown）

子セレクター

特定の要素の直下に配置された要素を選択できるのが「子セレクター」である。
子セレクターは親要素と子要素を>（大なり、greater than）で結ぶ。

html

	<div><strong>test</strong>testtest</div>
	<div>testtesttest</div>
	<div><span>testtest<strong>testtest</strong>test</span>test</div>

JQuery

$(function(){
	$("div > span > strong").css("color","blue");
}

３番目のdiv要素の子要素の子要素であるstrong要素が青色になる。
１番目のdiv要素の子要素であるstrong要素は青色にならない。

隣接セレクター

特定の要素の次に出現する要素を選択できるのが「隣接セレクター」である。
隣接セレクターは隣接する要素を+（プラス）で指定する。

html

	<div id="test1">testteststet</div>
	<div id="test2">testteststet</div>
	<div id="test3">testteststet</div>
	<div id="test4">testteststet</div>

JQuery

$(function(){
	$("#test3 + div").css("color","blue");
}

id属性が「test3」の要素の次に出現するdiv要素、
つまり４番目のdiv要素が青色になる。

first-child擬似クラス

特定のセレクターのうち、最初に登場する要素を指定するセレクターとして、
「first-child擬似クラス」がある。セレクターの後ろに：first-childと記述して指定する。
セレクターに含まれる要素の親要素が複数存在する場合は、
それぞれの最初に出現する子要素が選択される。

html

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

JQuery

$(function(){
	$("li:first-child").css("color","blue");
}

２つのul要素のそれぞれ最初に登場するli要素、
つまり１番目のli要素が青い色になる。

以上がCSS2のセレクターである。
明日は５つの分類のうちの

CSSでよく利用されるセレクター
CSS2のセレクター
CSS3のセレクター
CSSの属性セレクター
JQueryの独自フィルター

CSS3のセレクターを勉強する。
毎日一時間コツコツと。

ちなみにこの学習は

 Web制作の現場で使う jQueryデザイン入門 (WEB PROFESSIONAL)
で行なっている。