はじめに
親要素、子要素、兄弟要素の取得はよく使う割に忘れがちなので、纏めておきます。
jQuery
親要素
1. 親要素
.parent()
2. 先祖要素
.parents()
セレクトした要素の全て親要素を取得します。
また、parents('セレクター')のように引数としてセレクターを指定することで、条件を指定することもできます。
3. 直近の親要素
.closest()
最も近い親要素を取得します。
parents()と同じく引数にセレクターを指定することもできます。
子要素
1. 子要素
.children()
また、セレクタを使って子要素を取得することもできます。
子要素のn番目の要素
最初:$("#parent p:first")
最後:$("#parent p:last")
n番目:$("#parent p:nth-child(n)")
2. 子孫要素
.find()
全ての子孫要素から条件を指定して取得できます。
兄弟要素
1. 兄弟要素
.siblings()
全ての兄弟要素を取得します。
siblings("セレクタ")とすることで、取得する要素の条件も指定することができます。
隣接する兄弟要素
次の兄弟要素:.next()
以降の兄弟要素:.nextAll()
前の兄弟要素:.prev()
以前の兄弟要素:.prevAll()
javascript
親要素
1. 親要素
element.parentElement
子要素
1. 子要素
element.children
最初の子要素:element.firstElementChild
最後の子要素:element.lastElementChild
兄弟要素
1. 前の兄弟要素
element.previousElementSibling
2. 後の兄弟要素
element.nextElementSibling
css
親要素
1. 親要素
.parent:has(.children) {…}
子要素
1. 子要素
.parent > .children {…}
2. 子孫要素
.parent .children {…}
兄弟要素
1. 後続兄弟要素
.elem1 ~ .elem2 {…}
隣接する兄弟要素
.elem1 + .elem2 {…}