セレクターその７（子セレクター[CSS２]）

jQuery セレクター 



特定の要素の直下に配置された要素を指定できるのが「子セレクター」です。子セレクターは親要素と子要素を >（大なり/greater than）で結びます。
入れ子と別のセレクター（IDとclass）も試してみた。

<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() {
        //「>」を使う。この場合、liタグの「直下」にあるstrongタグのみが対象となる。
        $("li > strong").css("color","red");
        //「>」の両サイドのスペースを削除しても大丈夫な模様。
        $("li>div").css("color","blue");
        //「>」を連続して使ってみる。
        $("li>div>span").css("color","green");
        //セレクターにIDを使ってみる。
        $("li>#hoge").css("color","pink");
        //セレクターにclassを使ってみる。
        $("li>.fuga").css("color","yellow");
      })
    </script>
  </head>
  <body>
    <span class="second">グループ指定バージョン</span>
    <ul>
      <li><strong>テキスト</strong>テキストテキストテキストテキスト</li>
      <li>テキストテキストテキストテキストテキスト</li>
      <li><div><strong>テキスト</strong>テキストテキストテキスト<span>テキスト</span></div></li>
      <li>テキストテキストテキストテキストテキスト</li>
      <li>テキストテキストテキスト<span id="hoge">テキスト</span>テキスト</li>
      <li>テキストテキストテキストテキスト<div class="fuga">テキスト</div></li>
    </ul>
  </body>
</html>

全部いけるな。