カテゴリー:
CSS
閲覧数:106 配信日:2023-02-13 17:15
2 行で結論
隣接兄弟結合子{h1 + p}と、一般兄弟結合子{h1 ~ p}では、意味が異なります。
直後にある要素を選択は、隣接兄弟結合子{h1 + p}です。
説明文
隣接兄弟結合子
隣接兄弟結合子 (adjacent sibling combinator, +) は 2 つのセレクターを接続し、 2 つ目の要素が 1 つ目の要素の 直後 にあって、両者が同じ親要素の子同士である場合に一致します。
一般兄弟結合子
一般兄弟結合子 (general sibling combinator, ~) は 2 個のセレクターを結びつけ、 1 つ目の要素の後に 2 つ目の要素のがあり(直後である必要はない)、かつ両者が同じ親要素の子であるすべてのパターンに一致します。
比較一覧表
隣接兄弟結合子] | h1 + p | 隣接兄弟 | 対象は、直後のみ |
一般兄弟結合子 | h1 ~ p | 一般兄弟 | 対象は、必ずしも直後ではなくてもよい |