はじめに

親要素、子要素、兄弟要素の取得はよく使う割に忘れがちなので、纏めておきます。

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 {…}