フィルタというものを学びます。
イメージとしては、
セレクタによってある集合体を抽出した後、
その中から「ある条件」に合致する要素を取り出す場合に使用します。
今回はその中で、階層系のフィルタに焦点を絞って学びます。
●要素の指定方法（階層系フィルタ）
【サンプルソース】
10.各親要素に対して「最初の子要素」を取り出す
$(".unordered-list-class span:first-child")
指定した要素の最初の子要素が対象となります。
（始めに登場するspanタグのみ取り出す）
＜＜＜サンプルはこちら＞＞＞（始めに登場するspanタグのみ取り出す）
11.各親要素に対して「最後の子要素」を取り出す
$(".unordered-list-class span:last-child")
指定した要素の最後の子要素が対象となります。
（最後に登場するspanタグのみ取り出す）
＜＜＜サンプルはこちら＞＞＞（最後に登場するspanタグのみ取り出す）
12.各親要素が「1つだけ持つ子要素」を取り出す
$(".unordered-list-class span:only-child")
指定した要素の1つだけ子要素を持つ子要素が対象となります。
（spanタグが1つだけ登場する要素のみ取り出す）
＜＜＜サンプルはこちら＞＞＞（spanタグが1つだけ登場する要素のみ取り出す）
13.各親要素に対して「n番目の子要素」を取り出す（基本）
$(".unordered-list-class span:nth-child(2)")
指定した要素のn番目の子要素（サンプル:2番目）が対象となります。
＜＜＜サンプルはこちら＞＞＞14.各親要素に対して「n番目の子要素」を取り出す（応用）
$(".unordered-list-class span:nth-child(2n+1)")
指定した要素の『奇数』番目の子要素が対象となります。
「nth-child()」のカッコ内に数式を指定することで、色々なパターンで取り出すことができます。
＜＜＜サンプルはこちら＞＞＞「nth-child()」のカッコ内に数式を指定することで、色々なパターンで取り出すことができます。
いかがでしょうか？
階層に関連したフィルタの使い方を学びました。
次回は順番を意識したフィルタを学びます。
（13～14は階層というより、順序に該当しますね）
それでは、また。
