parent > child (親 > 子)

左辺の「親」 parent要素内にある 右辺の「子」 child要素にマッチするすべての要素を検索し、配列で返します。

前ページのように下記の「有効」というボタンをクリックしてみてください。



「有効」ボタンクリックで、「先祖」 form 要素内にある 「子」 input要素を有効にします。この動作は、前のページ と一見同じですね。
<form>
<input type="button" value="test" disabled>
</form>

<button onclick='
    $("form > input").attr("disabled","");
  '>
  有効
</button>
でも、 このセレクタは、前のページの、「先祖」に対する「子孫」要素と違って、 「親」要素に対する「子」要素ですので、「孫」や「ひ孫」までは影響しません。

たとえば、次のような場合は、「子」要素以外は変わりません。下記の「文字色変更」というボタンをクリックしてみてください。

色が変わります

 

色が変わりません

 

<div id="test2">

  <b>色が変わります</b>
  <div>
    <p>
      <div>
        <b>色が変わりません</b>
      </div>
    </p>
  </div>
  
  <button  style="border:1px solid #ddd" onclick='
    $("#test2 > b").css("color","red");
  '>
  文字色変更
  </button>

</div>


次ページでは、prev + next セレクタを使ってみます。