jQuery セレクタ 階層のセレクタ
これらは、DOMの階層構造を利用して抽出条件とするセレクタです。「＞」を使って表現する「$(‘親>子’)」のセレクタでは、「親」で指定した要素の中にある子要素を選択します。つまり、直接の親子関係が指定した条件に合致する要素だけマッチします。「スペース」を使って表現する「$(‘先祖 子孫’)」のセレクタは、両者が直接親子関係になくても、階層的に先祖と子孫の関係にあればまっちします。つまり、祖父、曾祖父、孫、曾孫といった、離れた階層関係でもよいということです。先に述べた「＞」を使用するセレクタでは親要素の直下にある子要素までしか調べないので、「スペース」を使って践祚と子孫の関係を調べるセレクタと比較すると速い時間で処理が行われます。「+」を使って表現する「$(‘前+次’)」は「＞」と同様に直接前後関係にある要素がマッチします。この場合、直後の要素なので選択されるものは1つになります。一方、「~（チルダ）」で表現する「$(‘前~兄弟’)」は~の前に指定された要素以降で、同列の兄弟であり、かつ指定条件にガチする要素がマッチします。なお、+と~において前後になり得るものでなければならないことに注意しましょう。階層によるセレクタは、複数の要素の相関関係を条件にするため、複雑な階層構造のドキュメントでは狙った動作にならない可能性が高くなります。
書式
$('親 > 子')
$('先祖 子孫')
$('前 + 次')
$('前 ~ 兄弟')$('ul > li')
$('div p')
$('label + input')
$('#start ~ div')サンプル
階層のセレクタ。サンプルの「ul>li」ボタンをクリックすると、ulタグの子要素になっているliタグだけがマッチし背景色が適用されます。間にある番号が振られているリストはolタグの子要素であるためulに対して親子関係ではありません。「ul li」ボタンは先祖要素に含まれる子孫要素を選択するので、ulタグの下にあるliタグはすべて選択されます。
「ul li+li」ボタンは前要素の直後にある要素を選択します。CSSセレクタにおけるスペースは子孫セレクタになるため、「ul li」ではulタグの下にあるliタグを子孫関係まで抽出します。したがって、HTMLで記述したolタグの中のliタグにも背景色が適用されます。「#start ~ li」ボタンは前要素の後ろにある要素を選択するため、id「start」が付与されたliタグよりも下にあるliタグに背景色が適用されます。また「~（チルダ）」は同じ階層にある要素を選択するため、この場合olタグ内のliはマッチしません。
<head>
<meta charset="UTF-8">
<title>テストページ</title>
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<style>
ul{
border: 1px solid #777;
width: 300px;
}
li,ol{
border: 1px solid #777;
}
</style>
</head>
<body>
<form>
<input type="button" id="gt" value="ul>li">
<input type="button" id="space" value="ul li">
<input type="button" id="plus" value="ul li+li">
<input type="button" id="tilde" value="#start ~ li">
<input type="button" id="clear" value="clear">
</form>
<ul>
<li>リスト</li>
<li id="start">リスト</li>
<li>リスト</li>
<ol>
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
</ol>
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
</ul>
</body>
<script>
$(document).ready(function(){
$('#gt').on('click',function(){
$('ul > li').css('background-color','red');
});
$('#space').on('click',function(){
$('ul li').css('background-color','red');
});
$('#plus').on('click',function(){
$('ul li+li').css('background-color','red');
});
$('#tilde').on('click',function(){
$('#start ~ li').css('background-color','red');
});
$('#clear').on('click',function(){
$('ul li').css('background-color','white');
});
});
</script>
