セレクターその１０（間接セレクター[CSS3]）

jQuery セレクター

特定のセレクターの後に出現する要素を指定できる。
セレクターと要素を ~(チルダ)で結びつける。

前とか後ろとか先頭とか、そういう表現があるときは要素の並びのことを意味するっぽい。
サンプルの状態から、また別のケースを考えてやってみた。

<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() {
        $("#second ~ li").css("color","red");
        $(".class0 ~ div").css("color","blue");
      })
    </script>
  </head>
  <body>
    <ul>
      <li id="first">テキストテキストテキストテキストテキスト</li>
      <li id="second">テキストテキストテキストテキストテキスト</li>
      <li id="third">テキストテキストテキストテキストテキスト</li>
      <li id="fourth">テキストテキストテキストテキストテキスト</li>
    </ul>
    <div>
      <div>hoge0</div>
      <span class="class0">hoge1</span><br />
      <span>hoge2</span>
      <div>hoge3</div>
      <div>hoge4</div>
      <div>hoge5</div>
    </div>
  </body>
</html>

やっぱり自分と同じレベルのノードの要素をグループとして、その前か後ろかという判断をしてるのかねぇ。
でもここらへんのセレクターは正直あんまり使わないんじゃないかなー。
わかんないけど。