「parent > child」のようにセレクタを「>」で区切って記述した場合には、parentに合致した要素直下の子要素childを取り出します。
先ほどの「ancestor descendant」のパターンと異なる点は、ancestor配下であればその階層にかかわらずすべてのdescendantを取り出したのに対して、「parent > child」ではparentの直接の子要素だけが対象となる点です。
以下は、リスト006と同様のHTMLで、セレクタだけを変えた例です。取り出されている要素の変化を確認してみてください。
<script type="text/javascript">
$(function() {
$('#target > p').css('border', 'solid 1px #FF0000');
});
</script>
</head>
<body>
<div id="target">
<p>1人目の子どもです。</p>
<div>
<p>孫です。</p>
</div>
<p>3人目の子どもです。</p>
</div>
<p>兄弟です。</p>
<div id="target">要素の配下であっても、「<p>孫です。</p>」は、間に<div>要素を挟んでいるため、いわゆる子孫要素です。このため「#target > p」には合致しないことが確認できます。
Copyright© Digital Advantage Corp. All Rights Reserved.
鬯ッ�ゥ隰ウ�セ�ス�ス�ス�ア鬮」蛹�スス�ウ髫カ謐コ諷」�ス�ス�ス�イ�ス�ス�ス�ス 鬯ッ�ョ�ス�ォ�ス�ス�ス�ェ鬮ッ蛹コ�サ繧托スス�ソ�ス�ス�ス�ス�ス�ス�ス�ス�ス�コ鬮」蛹�スス�オ髫エ竏オ�コ�キ�ス�ク�ス�キ�ス�ス�ス�ケ髫エ雜」�ス�「�ス�ス�ス�ス�ス�ス�ス�ウ鬯ゥ蟷「�ス�「�ス�ス�ス�ァ�ス�ス�ス�ス�ス�ス�ス�ュ鬯ゥ蟷「�ス�「髫エ雜」�ス�「�ス�ス�ス�ス�ス�ス�ス�ウ鬯ゥ蟷「�ス�「�ス�ス�ス�ァ�ス�ス�ス�ス�ス�ス�ス�ー