Kozackman Lab

CSS3のセレクター – 隣接セレクター

CSS3のセレクター

jQueryは、現在策定中のCSS3のセレクターの多くにも対応している。

隣接セレクター

特定のセレクターの後に出現する要素を選択できるのが「隣接セレクター」
セレクターの要素を、“~（チルダ）”で結びます。

<script type="text/javascript">
   $(function({
      $("second ~ li").css("color", "#9cf");
   });
</script>

<ul>
   <li id="first">テキスト1テキスト1テキスト1</li>
   <li id="second">テキスト2テキスト2テキスト2</li>
   <li id="third">テキスト3テキスト3テキスト3</li>
   <li id="fourth">テキスト4テキスト4テキスト4</li>
</ul>

id属性に「second」が設定された要素の後ろに登場するli要素、
つまり3番目以降のli要素が#9cfの色になる。

下記は上記ソースコードの結果、

• テキスト1テキスト1テキスト1
• テキスト2テキスト2テキスト2
• テキスト3テキスト3テキスト3
• テキスト4テキスト4テキスト4

2012/08/29　11:33 PM｜ カテゴリー ： jQuery｜ コメント