セレクターその８（隣接セレクター[CSS2]）

jQuery セレクター

隣接セレクター
指定したセレクターの次に出現するセレクターを指定できる。
「基準となるセレクター + 次に隣接しているセレクター」のフォーマットで指定。

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() {
        //フツーに。
	$("#second + li").css("color","red");
        //「+」の両サイドの半角スペースを削除
	$("#third+li").css("color","red");
        //classとIDと子セレクターを絡めて指定
	$(".class0+#hoge>.class1").css("color","blue");
      })
    </script>
  </head>
  <body>
    <ul>
      <li id="first">テキストテキストテキストテキストテキスト</li>
      <li id="second">テキストテキストテキストテキストテキスト</li>
      <li id="third">テキストテキストテキストテキストテキスト</li>
      <li id="fourth">テキストテキストテキストテキストテキスト</li>
      <li class="class0">テキストテキストテキストテキストテキスト</li>
      <li id="hoge"><span class="class2">テキスト</span>テキスト<span class="class1">テキスト</span>テキストテキスト</li>
      <li class="class1">テキストテキストテキストテキストテキスト</li>
      <li id="hoge">テキストテキストテキストテキストテキスト</li>
    </ul>
  </body>
</html>