Kozackman Lab

CSS2のセレクター – 子セレクター

IE6など、一部のWebブラウザーが対応していないCSS2のその他のセレクターも、
jQueryでは利用できる。

特定の要素の直下に配置された要素を選択できるのが、「子セレクター」
子セレクターは、親要素と子要素を“>（大なり）”で結ぶ。

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

<ul>
   <li><i>テキスト1</i>テキスト1テキスト1</li>
   <li>テキスト2テキスト2テキスト2</li>
   <li><div><strong>テキスト3</strong>テキスト3<span>テキスト3</span></div></li>
   <li>テキスト4テキスト4テキスト4</li>
</ul>

1番目のli要素の子要素であるstrong要素が#9cfの色になる。
3番目のli要素はdiv要素の直下に配置されているので、strong要素があっても反映されない。

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

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

2012/08/29　1:39 AM｜ カテゴリー ： jQuery｜ コメント