"parent > child"

$('parent > child') 1.0追加

親要素(parent)を持つ子エレメント(child)を選択します。

項目 説明
parent 親要素です。特定のセレクタを指定します。
child 子要素です。parentから更に絞り込むセレクタを指定

子要素と連結するCSSセレクタは、Safari、Firefox、Opera、Chrome、IE7以降などのモダンブラウザでサポートされていますが、 IE6以下ではサポートされていません。jQueryのセレクタではこの差異を吸収し、サポートされていないブラウザでも使用可能になっています。

(E > F)は1つしたの子孫要素に限定する点で、(E F)の子孫全てが対象になるセレクタに比べて、 より具体的、限定的なフィルタリングをします。

デモ

<ul class="topnav">の子要素のLIをボーダーで囲います。

<!DOCTYPE html>
<html>
<head>
<style>
  body { font-size:14px; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<ul class="topnav">
  <li>項目 1</li>
  <li>項目 2
    <ul><li>小項目 1</li><li>小項目 2</li><li>小項目 3</li></ul>
  </li>
  <li>項目 3</li>
</ul>
<script>$("ul.topnav > li").css("border", "3px double red");</script>
</body>
</html>

 Back to top

© 2010 - 2017 STUDIO KINGDOM