前回は参照したい要素をダイレクトに指定しましたが、
今回の「階層」では、
対象となる要素から見て、
同じ階層、または、従属する階層の要素を取り出すために利用します。
●要素の指定方法（階層）
【サンプルソース】
6.[子孫セレクタ]先祖要素（左側）を持つ、子孫要素（右側）を指定する
$(".box li") // 半角スペースで区切る
指定した親要素の配下に属する子孫要素が対象となります。
＜＜＜サンプルはこちら＞＞＞7.[子セレクタ]親要素（左側）を持つ、子要素（右側）を指定する（直下のみ）
$(".box > ul") // " > "で区切る
指定した親要素の配下に属する子要素が対象となります。（子要素のみ指定できます）
＜＜＜サンプルはこちら＞＞＞8.[隣接セレクタ]前後関係になっている後方の要素を指定する
$("#list-item1 + #list-item2") // " + "で区切る
指定した要素に続く要素が対象となります。（直後の要素のみ指定できます）
例えば、『$("#list-item1 + #list-item3")』としても要素は取得できません。
＜＜＜サンプルはこちら＞＞＞例えば、『$("#list-item1 + #list-item3")』としても要素は取得できません。
9.[兄弟セレクタ]前後関係になっている後方の全ての要素を指定する
$("#list-item1 ~ #list-item3") // " ~ "で区切る
指定した要素と同じ階層にある、後方の要素が対象となります。
[隣接セレクタ]との違いは、同じ階層にあれば隣り合っていなくても良い所です。
＜＜＜サンプルはこちら＞＞＞[隣接セレクタ]との違いは、同じ階層にあれば隣り合っていなくても良い所です。
いかがでしょうか？
階層によるセレクタの使い方を学びました。
次回はセレクタによって取得した結果をさらに絞り込む、
フィルタというものを学びます。
それでは、また。
