ancestor descendant (祖先 子孫)

左辺の「先祖 ancestor」要素内にある 右辺の「子孫 descendant」要素にマッチするすべての要素を検索し、配列で返します。

たとえば、簡単なサンプルを作ってみます。下記の「test」というボタンは現在 disabledになっていますが、「有効」というボタンをクリックしてみてください。



「有効」ボタンクリックで、「test」ボタンが有効になります。 つまり、「先祖」 form 要素内にある 「子孫」 input要素が有効になります。
<form>
<input type="button" value="test" disabled>
</form>

<button onclick='
    $("form input").attr("disabled","");
  '>
  有効
</button>
このセレクタの特徴は、「子孫」ですので、先祖要素の「孫」や「ひ孫」にまで影響を与えることです。

たとえば、次のような深い階層にある要素も制御できます。下記の「文字色変更」というボタンをクリックしてみてください。

 

色が変わります

 

<div id="test2">

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

</div>


次ページでは、parent > child セレクタを使ってみます。