"parent > child"
- $('parent > child') 1.0追加
- デモ
$('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>
© 2010 - 2017 STUDIO KINGDOM