セレクターその９（first-child擬似クラス[CSS2]）

jQuery セレクター

特定のセレクターのうち最初に登場する要素のみを指定するセレクター。
ってことなんだけど、いまいちわかんねー。
サンプルではli要素を指定しているけど、liは連続していることが前提なのか？
と思ったので、ちょっと自分でも要素を追加してみた。

<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:first-child").css("color","red");
        //連続しているdiv要素に適用したつもりだが、hoge1,hoge2が青くならない。。なぜ？
        $("div:first-child").css("color","blue");
        //divで括ったspan要素に適用すると「ほげ１」緑になるが、「ほげ２」は緑にならない。
        $("span:first-child").css("color","green");
      })
    </script>
  </head>
  <body>
    <ul>
      <li>テキストテキストテキストテキストテキスト</li>
      <li>テキストテキストテキストテキストテキスト</li>
      <li>テキストテキストテキストテキストテキスト</li>
      <li>テキストテキストテキストテキストテキスト</li>
    </ul>
    <ul>
      <li>テキストテキストテキストテキストテキスト</li>
      <li>テキストテキストテキストテキストテキスト</li>
      <li>テキストテキストテキストテキストテキスト</li>
      <li>テキストテキストテキストテキストテキスト</li>
    </ul>
    <div>hoge1</div>
    <span>fuga1</span>
    <div>hoge2</div>
    <div>hoge3</div>
    <div>
      <span>ほげ１</span>
      <span>ほげ２</span>
      <a>ふが１</a>
      <span>ほげ３</span>
    </div>
  </body>
</html>

これだとhoge1の文字が青くならない。（spanの方の「ほげ１」は緑色になる。）
「div:first-child」は、「divを選べ。但し、そのdivはノードの中の先頭要素になっていなければダメよ」という解釈でいいんかな。
そうするとhoge1をbodyの子要素として先頭に持ってくると適用されるはず！

<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:first-child").css("color","red");
        $("div:first-child").css("color","blue");
        $("span:first-child").css("color","green");
      })
    </script>
  </head>
  <body>
    <!-- body要素の子要素として先頭要素になるように、ここに持ってきた！ -->
    <div>hoge1</div>
    <ul>
      <li>テキストテキストテキストテキストテキスト</li>
      <li>テキストテキストテキストテキストテキスト</li>
      <li>テキストテキストテキストテキストテキスト</li>
      <li>テキストテキストテキストテキストテキスト</li>
    </ul>
    <ul>
      <li>テキストテキストテキストテキストテキスト</li>
      <li>テキストテキストテキストテキストテキスト</li>
      <li>テキストテキストテキストテキストテキスト</li>
      <li>テキストテキストテキストテキストテキスト</li>
    </ul>

    <span>fuga1</span>
    <div>hoge2</div>
    <div>hoge3</div>
    <div>
      <a>ふが１</a>
      <span>ほげ１</span>
      <span>ほげ２</span>
      <span>ほげ３</span>
    </div>
  </body>
</html>

お〜、適用された！この解釈であってるっぽいぞ！