Web制作の現場で使えるjQuery UIデザイン入門 ― 第3回
初めてのjQuery：セレクターAPIを一挙解説（前編）
2009年07月30日 10時00分更新
3．CSS3のセレクター
jQueryは、現在策定中のCSS3（Cascading Style Sheets level 3）のセレクターの多くにも対応しています。
■間接セレクター
特定のセレクターの後に出現する要素を指定できるのが「間接セレクター」です。セレクターと要素を ~(チルダ)で結びます。
▼サンプルコード（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要素が赤色になります。ただし、本記事執筆時点（2009年7月）ではFirefox3で正常に動作しないようです。
 |
|---|
■否定擬似クラス
セレクター内で特定の条件以外のものを指定できるのが「否定擬似クラス」です。セレクターの後ろに :not(...) を付け、除外する条件を (...) 内に記述します。
▼サンプルコード（HTML部分）
<ul>
<li>テキストテキストテキストテキストテキスト</li>
<li>テキストテキストテキストテキストテキスト</li>
<li>テキストテキストテキストテキストテキスト</li>
<li>テキストテキストテキストテキストテキスト</li>
</ul>
▼サンプルコード（スクリプト部分）
$(function(){
$("li:not(:first-child)").css("color","red");
})
▼実行結果（実際のWebページ）
最初に登場する1行目のli要素以外のli要素、つまり2行目以降のli要素が赤色になります。
 |
|---|
■empty擬似クラス
子要素やテキストを含まない要素を指定できるのが「empty擬似クラス」です。セレクターの後ろに :empty と記述します。
▼サンプルコード（HTML部分）
<ul>
<li>テキストテキストテキストテキストテキスト</li>
<li></li>
<li>テキストテキストテキストテキストテキスト</li>
<li></li>
</ul>
▼サンプルコード（スクリプト部分）
$(function(){
$("li:empty").css("color","red");
})
▼実行結果（実際のWebページ）
空のli要素、つまり2行目と4行目の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]")
