階層セレクタについて[隣接][間接][jQuery]

2017年7月13日

セレクタとは指定したHTMLの要素をjQueryオブジェクトに変換するための機能です。本記事では、要素の階層構造を利用した指定方法である「階層セレクタ」を説明します。

 

階層セレクタは以下のように分類されます。

 子セレクタ  $(‘親要素>子要素’)
 子孫セレクタ  $(‘祖先要素 子孫要素’)
 隣接セレクタ  $(‘前要素+後要素’)
 間接セレクタ(兄弟セレクタ)  $(‘前要素~兄弟要素’)

 

 

子セレクタ


 

親要素直下の子要素を選択します。

$(‘親要素>子要素’)

<p>う</p>は、<div>〜</div>に囲まれており#parentの直下ではないので、緑色にはなりません。

 

 

子孫セレクタ


 

祖先要素の全ての子孫要素を選択します。

$(‘祖先要素 子孫要素’)

#parentよりも下の階層にある全ての<p>〜</p>が選択されています。

 

 

隣接セレクタ


 

前要素の後(次)の要素を選択します。

$(‘前要素+後要素’)

p要素があり、そのすぐ次の要素がpである要素を選択しています。

h2要素があり、そのすぐ後がp要素であるのは「く」のみです。

 

 

間接セレクタ(兄弟セレクタ)


 

前要素以降の兄弟要素を選択します。

$(‘前要素~兄弟要素’)

.sample要素以降の兄弟要素のみが選ばれます。「え、お」は階層が1つ下であり、「く」は.sample要素以前なので選択されません。

 

 

関連ページ

基本セレクタについて[要素][id][クラス]

 

 

LINEで送る
Pocket

Copyright © 2019 思考の葉 All Rights Reserved.  プライバシーポリシー