このページの本文へ

初めてのjQuery:セレクターAPIを一挙解説(前編)

2009年07月30日 10時00分更新

西畑一馬/to-R

  • この記事をはてなブックマークに追加
本文印刷

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で正常に動作しないようです。

サンプル10


■否定擬似クラス

 セレクター内で特定の条件以外のものを指定できるのが「否定擬似クラス」です。セレクターの後ろに :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要素が赤色になります。

サンプル11


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

サンプル12

Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

Webディレクター江口明日香が行く