セレクタとは指定したHTMLの要素をjQueryオブジェクトに変換するための機能です。本記事では、要素の階層構造を利用した指定方法である「階層セレクタ」を説明します。
階層セレクタは以下のように分類されます。
| 子セレクタ | $(‘親要素>子要素’) |
| 子孫セレクタ | $(‘祖先要素 子孫要素’) |
| 隣接セレクタ | $(‘前要素+後要素’) |
| 間接セレクタ（兄弟セレクタ） | $(‘前要素~兄弟要素’) |
子セレクタ
親要素直下の子要素を選択します。
$(‘親要素>子要素’)
|
1 2 3 4 5 6 7 |
<div id="parent"> <p>あ</p> <p>い</p> <div> <p>う</p> </div> </div> |
|
1 |
$('#parent > p').css('color', 'green'); //「あ、い」が緑色になる |
<p>う</p>は、<div>〜</div>に囲まれており#parentの直下ではないので、緑色にはなりません。
子孫セレクタ
祖先要素の全ての子孫要素を選択します。
$(‘祖先要素 子孫要素’)
|
1 2 3 4 5 6 7 |
<div id="parent"> <p>あ</p> <p>い</p> <div> <p>う</p> </div> </div> |
|
1 |
$('#parent p').css('color', 'green'); //「あ、い、う」全てが緑色になる |
#parentよりも下の階層にある全ての<p>〜</p>が選択されています。
隣接セレクタ
前要素の後（次）の要素を選択します。
$(‘前要素+後要素’)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<div id="parent1"> <h1>あ</h1> <p>い</p> <div> <p>う</p> <p>え</p> </div> </div> <div id="parent2"> <p>お</p> <p>か</p> <div> <h2>き</h2> <p>く</p> <p>け</p> <p>こ</p> </div> </div> |
|
1 |
$('p + p').css('color', 'green'); //「え、か、け、こ」が緑色になる |
p要素があり、そのすぐ次の要素がpである要素を選択しています。
|
1 |
$('h2 + p').css('color', 'green'); //「く」が緑色になる |
h2要素があり、そのすぐ後がp要素であるのは「く」のみです。
間接セレクタ（兄弟セレクタ）
前要素以降の兄弟要素を選択します。
$(‘前要素~兄弟要素’)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<div id="parent1"> <p class="sample">あ</h1> <p>い</p> <p>う</p> <div> <p>え</p> <p>お</p> </div> </div> <div id="parent2"> <p>か</p> <p>き</p> <div> <p>く</p> <p class="sample">け</p> <p>こ</p> <p>さ</p> </div> </div> |
|
1 |
$('.sample~p').css('color', 'green'); //「い、う、こ、さ」が緑色になる |
.sample要素以降の兄弟要素のみが選ばれます。「え、お」は階層が１つ下であり、「く」は.sample要素以前なので選択されません。
関連ページ
