このページの本文へ

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

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

文●西畑一馬/to-R

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

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


この連載の記事

一覧へ

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

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