Webサイト制作におけるjQueryのセレクタの種類2

ｊQuery

前回に続き、Webサイト制作のコーディングにおいて用いるjQueryのセレクタの種類をまとめていく。

今回は少し高度？なセレクタについて確認する。

セレクタの種類
  • 子セレクタ：指定した親に対する子のみ（孫以下は対象外）を指定するセレクタ　例 div > span （親 > 子）
  • 隣接セレクタ：HTML内の２つの要素が、間に他の（同階層の）要素を含まない状態で、隣り合っている場合に、“２つ目に指定した要素”を指定するセレクタ　例 h2 + h3
  • 間接セレクタ：HTML内において、“１つ目に指定した要素”より後に書かれている“２つ目に指定した要素”を指定するセレクタ　例 h4 ~ h5
  • 順番セレクタ：指定した要素の同階層（兄弟関係）にあるものの中で、指定した順番にある要素を指定するセレクタ　例 :nth-child(2)、:first-child　※注意が必要（下記確認結果参照）
  • 否定セレクタ：指定した条件に該当しないものを指定するセレクタ　例 :not(div)　※注意が必要（下記確認結果参照）

各セレクタの種類ごとに挙動を確認していく。

子セレクタ

以下、確認コード。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jQueryの練習 | 子セレクタ</title>
<style>
body, div, p, a, h2, h3, h4, h5 {
  margin: 0;
  padding: 0;		
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<!-- 子セレクタの確認1 $( 'p.one > ' ) -------------------------------- -->
<p class="one"><em>p.oneの中のemの中</em></p>
<p class="one"><span>p.oneの中のspanの中</span></p>
<p class="one"><span><em>p.oneの中のspanの中のemの中</em></span></p>
<p>pの中</p>
<hr>
<!-- 子セレクタの確認2 $( 'div > span' ) ----------------------------- -->
<div><span>divの中のspanの中</span></div>
<div><div><span>divの中のdivの中のspanの中</span></div></div>
<div><p><span>divの中のpの中のspanの中</span></p></div>
<script>
$(function(){
  $( 'p.one > ' ).css( 'background', 'lightgreen' );
  $( 'div > span' ).css( 'background', 'lightblue' );
});
</script>
</body>
</html>

以下、表示結果。
←クリックで拡大表示

隣接セレクタ

以下、確認コード。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jQueryの練習 | 隣接セレクタ</title>
<style>
body, div, p, a, h1, h2, h3, h4, h5 {
  margin: 0;
  padding: 0;		
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<!-- 隣接セレクタの確認1 $( 'h1 + ' ) ---------------------------------- -->
<h1>h1の中</h1>
<h2>h2の中</h2>
<h2>h2の中</h2>
<h1>h1の中</h1>
<div><h3>divの中のh3の中</h3></div>
<hr>
<!-- 隣接セレクタの確認2 $( 'h2 + h3' ) -------------------------------- -->
<h2>h2の中</h2>
<h3>h3の中</h3>
<h3>h3の中</h3>
<h2>h2の中</h2>
<div><h3>divの中のh3の中</h3></div>
<h3>h3の中</h3>
<hr>
<!-- 隣接セレクタの確認3 $( 'h4 + div span' ) -------------------------- -->
<h4>h4の中</h4>
<div><span>divの中のspanの中</span></div>
<h4>h4の中</h4>
<div><p><span>divの中のpの中のspanの中</span></p></div>
<script>
$(function(){
  $( 'h1 + ' ).css( 'background', 'lightgreen' );
  $( 'h2 + h3' ).css( 'background', 'lightblue' );
  $( 'h4 + div span' ).css( 'background', 'red' );
});
</script>
</body>
</html>

以下、表示結果。
←クリックで拡大表示

間接セレクタ

以下、確認コード。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jQueryの練習 | 間接セレクタ</title>
<style>
body, div, p, a, h2, h3, h4, h5 {
  margin: 0;
  padding: 0;		
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<!-- 間接セレクタの確認１  $( '.second ~ ' ) ------------------------------ -->
<div>
  <p>pの中</p>
  <p class="second">指定したpの中</p>
  <p>pの中</p>
  <div>divの中</div>
</div>
<hr>
<!-- 間接セレクタの確認2 $( 'h4 ~ h5' ) ----------------------------------- -->
<h4>h4の中</h4>
<h5>h5の中</h5>
<h5>h5の中</h5>
<div><h5>divの中のh5</h5></div>
<h5>h5の中</h5>
<hr>
<!-- 間接セレクタの確認3 $( '.third ~ li span' ) -------------------------- -->
<div>
  <ul>
    <li>liの中</li>
    <li class="third"><span>指定したliの中のspanの中</span></li>
    <li>liの中</li>
    <li><span>liの中のspanの中</span></li>
    <li>
      <ul>
        <li>
          <span>liの中のulの中のliの中のspanの中</span>
        </li>
      </ul>
    </li>
  </ul>
</div>
<ul>
  <li>
    <span>ulの中のliの中のspanの中</span>
  </li>
</ul>
<script>
$(function(){
  $( '.second ~ ' ).css( 'background', 'yellow' );
　$( 'h4 ~ h5' ).css( 'background', 'green' );
  $( '.third ~ li span' ).css( 'background', 'pink' );
});
</script>
</body>
</html>

以下、表示結果。
←クリックで拡大表示

順番セレクタ

以下、確認コード。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jQueryの練習 | 順番セレクタ</title>
<style>
body, div, p, a, h2, h3, h4, h5 {
  margin: 0;
  padding: 0;		
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<!-- 順番セレクタの確認1 $( 'li.one:first-child' ) ------------------------- -->
<ol>
  <li class="one">ol.oneの中のliの中</li>
  <li class="one">ol.oneの中のliの中</li>
  <li class="one">ol.oneの中のliの中</li>
  <li class="one">
    <ul>
      <li>olの中のli.oneの中のulの中のliの中</li>
      <li>olの中のli.oneの中のulの中のliの中</li>
      <li>olの中のli.oneの中のulの中のliの中</li>
    </ul>
  </li>
  <li>
    <ul>
      <li class="one">olの中のli.oneの中のulの中のliの中</li>
      <li class="one">olの中のli.oneの中のulの中のliの中</li>
      <li>olの中のli.oneの中のulの中のliの中</li>
    </ul>
  </li>
</ol>
<!-- 順番セレクタの確認2 $( 'li.second:nth-child(3)' )    ------------------ -->
<ul>
  <li class="second">ulの中のliの中</li>
  <li class="second">ulの中のliの中</li>
  <li class="second">
    <ol>
      <li>ulの中のli.secondの中のolの中のliの中</li>
      <li>ulの中のli.secondの中のolの中のliの中</li>
      <li>ulの中のli.secondの中のolの中のliの中</li>
    </ol>
  </li>
  <li class="second">
    <ol>
      <li>ulの中のli.secondの中のolの中のliの中</li>
      <li>ulの中のli.secondの中のolの中のliの中</li>
      <li>ulの中のli.secondの中のolの中のliの中</li>
    </ol>
  </li>
  <li>
    <ol>
      <li class="second">ulの中のliの中のolの中のli.secondの中</li>
      <li>ulの中のliの中のolの中のliの中</li>
      <li>ulの中のliの中のolの中のliの中</li>
      <li class="second">ulの中のliの中のolの中のli.secondの中</li>
      <li class="second">ulの中のliの中のolの中のli.secondの中</li>
    </ol>
  </li>
  <li>
    <ol>
      <li>ulの中のliの中のolの中のliの中</li>
      <li class="second">ulの中のliの中のolの中のli.secondの中</li>
      <li>ulの中のliの中のolの中のliの中</li>
      <li class="second">ulの中のliの中のolの中のli.secondの中</li>
      <li class="second">ulの中のliの中のolの中のli.secondの中</li>
    </ol>
  </li>
  <li>
    <ol>
      <li class="second">ulの中のliの中のolの中のli.secondの中</li>
      <li>ulの中のliの中のolの中のliの中</li>
      <li class="second">ulの中のliの中のolの中のliの中</li>
      <li class="second">ulの中のliの中のolの中のli.secondの中</li>
      <li class="second">ulの中のliの中のolの中のli.secondの中</li>
    </ol>
  </li>
</ul>
<!-- 順番セレクタの確認3 $( 'ul.third li:nth-child(2)' ) ------------------- -->
<ul class="third">
  <li>ul.thirdの中のliの中</li>
  <li>ul.thirdの中のliの中</li>
  <li>ul.thirdの中のliの中</li>
</ul>
<ul class="third">
  <li>ul.thirdの中のliの中</li>
  <li>
    <ol>
       <li>ul.thirdの中のliの中のolの中のliの中</li>
       <li>ul.thirdの中のliの中のolの中のliの中</li>
       <li>ul.thirdの中のliの中のolの中のliの中</li>
     </ol>
  </li>
  <li>
    <ol>
       <li>ul.thirdの中のliの中のolの中のliの中</li>
       <li>ul.thirdの中のliの中のolの中のliの中</li>
       <li>ul.thirdの中のliの中のolの中のliの中</li>
    </ol>
  </li>
</ul>
<script>
$(function(){
  $( 'li.one:first-child' ).css( 'background', 'orange' );
  $( 'li.second:nth-child(3)' ).css( 'background', 'grey' );
　$( 'ul.third li:nth-child(2)' ).css( 'background', 'green' );
});
</script>
</body>
</html>

以下、表示結果。
←クリックで拡大表示
確認2の結果から、「:nth-child()」は指定した条件を満たすもの（li.second）の中での順番指定ではなく、指定した要素（li）の同階層にいるものの中で、指定した順番（liの中で上から３番目）にいるものが指定した条件（li.second）を満たすものだった場合に指定したメソッドが実行（適用）されるということが分かる。

否定セレクタ

以下、確認コード。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jQueryの練習 | 否定セレクタ</title>
<style>
body, div, p, a, h2, h3, h4, h5 {
  margin: 0;
  padding: 0;		
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<!-- 否定セレクタの確認1 $( 'ul li:not(.one)') ----------------------------- -->
<ul>
  <li class="one">ulの中のli.oneの中</li>
  <li class="one">ulの中のli.oneの中</li>
  <li class="one">
    <ol>
      <li class="one">ulの中のli.oneの中のolの中のli.oneの中</li>
      <li>ulの中のli.oneの中のolの中のliの中</li>
    </ol>
  </li>
  <li>ulの中のliの中</li>
  <li>
    <ol>
      <li class="one">ulの中のliの中のolの中のli.oneの中</li>
      <li>ulの中のliの中のolの中のliの中</li>
    </ol>
  </li>
</ul>
<hr>
<!-- 否定セレクタの確認2 $( 'ul.second li:not(.two)') ---------------------- -->
<ul class="second">
  <li class="two">ul.secondの中のli.twoの中</li>
  <li class="two">ul.secondの中のli.twoの中</li>
  <li class="two">
    <ol>
      <li class="two">ul.secondの中のli.twoの中のolの中のli.twoの中</li>
      <li>ul.secondの中のli.twoの中のolの中のliの中</li>
    </ol>
  </li>
  <li>ul.secondの中のliの中</li>
  <li>
    <ol>
      <li class="two">ul.secondの中のliの中のolの中のli.twoの中</li>
      <li>ul.secondの中のliの中のolの中のliの中</li>
    </ol>
  </li>
</ul>
<script>
$(function(){
  $( 'li:not(.one)').css( 'background', 'green' );
　$( 'ul.second li.two').css( 'background', 'white' ); /* 確認２に対する確認１の影響をなくす  */
　$( 'ul.second li:not(.two)').css( 'background', 'yellow' );
});
</script>
</body>
</html>

以下、表示結果。
←クリックで拡大表示
入れ子の場合、否定条件を満たしているのが親か子かは関係なく、否定条件を満たしている方が優先されることが分かる。

※「:nth-child()」や「:not()」の括弧内にはシングル（orダブル）クォートは必要ない
※「:first-child」はIE6ではサポートされていないのでCSSの擬似セレクタとしては使うことはできない
※jQueryでは上記のような特定のブラウザでサポートされていないようなセレクタも使うことができる