【jQuery & CSS】兄弟要素

良く検索するので、兄弟要素の記述をメモ。

jQuery
//thisの兄弟
$(this).siblings()

//thisの兄弟
$(this).parent().children()

//thisの兄弟からdivだけ
$(this).parent().children(‘div’)

//thisの一つ前の兄弟
$(this).prev()

//thisの後ろ全ての兄弟
$(this).nextAll()

//thisの子を全て
$(‘>*’, this)
参照:jQueryでのthisの兄弟要素はどのように記述しますか?

CSS
//隣接兄弟セレクタ(弟要素が兄要素のすぐ次に現れた場合だけが対象)
兄要素 + 弟要素 {
プロパティ: 値;
}

//一般兄弟セレクタ(別名「間接セレクタ」親要素が同じになる兄弟関係の弟に適用されるセレクタです。)
兄要素 ~ 弟要素 {
プロパティ: 値;
}
隣接セレクタが直後の弟に対して、間接セレクタは兄弟関係に有れば、間に別の要素が入っても適用されます。
参照:間接セレクタ (E ~ F)|セレクタ|CSS HappyLife ZERO

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください