セレクターその１９（jQueryの独自フィルター　firstフィルター / lastフィルター）

う〜ん、わかんねぇ。。



first-child／last-childセレクターが共通の親要素を持つ要素から最初（または最後）の要素を選択するのに対して、

last／firstフィルターは指定したセレクターで最初（最後）に登場する要素を指定できます。

first-child、last-childとの違いが分からん。
例によって自前タグを追加して実験。

<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").css("color","red");
        $("li:last").css("color","red");
        $("div:first").css("color","blue");
        $("div:last").css("color","green");
        $("div div div:first").css("color","blue");
        $("div div div:last").css("color","green");
      })
    </script>
  </head>
  <body>
    <div>さいしょ</div>
    <ul>
      <li>テキストテキストテキストテキストテキスト</li>
      <li>テキストテキストテキストテキストテキスト</li>
      <li>テキストテキストテキストテキストテキスト</li>
      <li>テキストテキストテキストテキストテキスト</li>
    </ul>
    <div>
      ほげほげ
      <div>ブロックのなかのさいしょ</div>
      <div>ブロックのなかのまんなか</div>
      <div>ブロックのなかのさいご</div>
      <div>
	<div>hogehoge</div>
	<div>fugafuga</div>
	<div>mogamoga</div>
      </div>
      ふがふが
    </div>
    <div>さいご</div>
  </body>
</html>

どうやら子孫セレクターとかと併用しない場合はドキュメント中で最初／最後に出てきたものがfirst／lastで指定される模様。
子孫セレクターを使用すれば指定したタグツリーに対しても適用できるのかな？