セレクターその４（子孫セレクター）



複数のセレクターをスペース区切りで指定することにより、特定の要素の内側にある要素をさらに絞りこんで指定できます。

例ではclassセレクター＋要素セレクターの組み合わせだけになっていたけど、
ちょっと修正してIDセレクターも含めて試してみた。

<html>
  <head>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">google.load("jquery", "1.3.2");</script>
    <script type="text/javascript">
      $(function() {
        //classが「first」で、その内部にあるstrong要素の文字色を赤にする
        $(".first strong").css("color","red");
        //IDが「first」で、その内部にあるstrong要素の文字色を青にする
        $("#first strong").css("color","blue");
        //タグが「li」で、その内部にあるIDが「hoge」の要素の文字色を緑にする
        $("li #hoge").css("color","green");
      })
    </script>
  </head>
  <body>
    <span class="second">子孫指定バージョン</span>
    <ul>
      <li class="first"><strong>テキスト</strong>テキストテキストテキストテキスト</li>
      <li class="first"><strong id="hoge">テキスト</strong>テキストテキストテキストテキスト</li>
      <li id="first"><strong>テキスト</strong>テキストテキストテキストテキスト</li>
      <li id="first"><strong>テキスト</strong>テキストテキストテキストテキスト</li>
  </ul>  </body>
</html>