Web制作の現場で使えるjQuery UIデザイン入門 ― 第3回
初めてのjQuery：セレクターAPIを一挙解説（前編）
2009年07月30日 10時00分更新
2．CSS2のセレクター
Internet Explorer 6（IE6）などの一部のブラウザーが対応していないCSS2（Cascading Style Sheets Level 2）のそのほかのセレクターも、jQueryでは利用できます。
■子セレクター
特定の要素の直下に配置された要素を指定できるのが「子セレクター」です。子セレクターは親要素と子要素を >（大なり/greater than）で結びます。
▼サンプルコード（HTML部分）
<ul>
<li><strong>テキスト</strong>テキストテキストテキストテキスト</li>
<li>テキストテキストテキストテキストテキスト</li>
<li><div><strong>テキスト</strong>テキストテキストテキスト<span>テキスト</span></div></li>
<li>テキストテキストテキストテキストテキスト</li>
</ul>
▼サンプルコード（スクリプト部分）
$(function(){
$("li > strong").css("color","red");
})
▼実行結果（実際のWebページ）
1行目のli要素の子要素のspan要素が赤色になります。3行目のstrong要素はdiv要素の直下に配置された要素なので赤色にはなりません。
 |
|---|
■隣接セレクター
特定の要素の次に出現する要素を指定できるのが「隣接セレクター」です。隣接セレクターは隣接する要素を +（プラス）で指定します。
▼サンプルコード（HTML部分）
<ul>
<li id="first">テキストテキストテキストテキストテキスト</li>
<li id="second">テキストテキストテキストテキストテキスト</li>
<li id="third">テキストテキストテキストテキストテキスト</li>
<li id="fourth">テキストテキストテキストテキストテキスト</li>
</ul>
▼サンプルコード（スクリプト部分）
$(function(){
$("#second + li").css("color","red");
})
▼実行結果（実際のWebページ）
id属性にsecondが指定された要素の次に出現するli要素、つまり3行目のli要素が赤色になります。
 |
|---|
■first-child擬似クラス
特定のセレクターのうち最初に登場する要素のみを指定するセレクターとして、「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>
▼サンプルコード（スクリプト部分）
$(function(){
$("li:first-child").css("color","red");
})
▼実行結果（実際のWebページ）
2つのul要素それぞれ最初に登場するli要素、つまり1行目のli要素が赤色になります。
 |
|---|
この連載の記事
- 最終回 実務で使えるjQueryプラグイン3選
- 第25回 制作現場で役立つjQueryプラグインの使い方
- 第24回 jQueryとAjaxで作るスムーズページング
- 第23回 jQuery＋CSSによるカルーセルパネルの作り方
- 第22回 jQueryでバリデーション付きメールフォームを作ろう
- 第21回 jQueryで自作するフローティングウィンドウ
- 第20回 jQueryによるLightbox風モーダルウィンドウの作り方
- 第19回 jQueryで作る多階層ドロップダウンメニュー
- 第18回 IE6対応！jQueryで透過PNGのロールオーバーを作る
- 第17回 jQueryでロールオーバー！プリロード対応版
- この連載の一覧へ
![Microsoft Windows7 Home Premium 64bit 日本語 DSP版 + メモリ [DVD-ROM]](http://ascii.jp/img/amazon_noimg70.gif "Microsoft Windows7 Home Premium 64bit 日本語 DSP版 + メモリ [DVD-ROM]")
