Web制作の現場で使えるjQuery　UIデザイン入門 ― 第3回

初めてのjQuery：セレクターAPIを一挙解説（前編） (5/6)

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要素が赤色になります。