CSS ・ CSSの記法
A + B
隣接兄弟セレクタ（すぐ次の要素）
セレクタを「+」で区切ると、「A のすぐ次にある兄弟要素の B」を1つだけ指定できます。兄弟要素とは、同じ親を持つ要素どうしのことです。
01
サンプルコード
HTML
1<h2>メニュー</h2>
2<p>1つ目の段落</p>
3<p>2つ目の段落</p>
4<p>3つ目の段落</p>
CSS
1/* h2 のすぐ次にある p だけ */
2h2 + p {
3 color: #c0392b;
4 font-weight: bold;
5}
02
実行結果
ブラウザでの表示h2 のすぐ次にある「1つ目の段落」だけが赤くなります
03
解説
A + B と書くと、A の直後（すぐ次）にある兄弟要素の B だけが対象になります。これを「隣接兄弟セレクタ」と呼びます。
「兄弟要素」とは、同じ親要素の中に並んでいる要素どうしのことです。上の例では h2 と3つの p が兄弟で、h2 のすぐ次にある「1つ目の段落」だけが赤くなっています。
見出しの直後の段落だけ余白を変えたり、同じ要素が続くときに2つ目以降だけ間隔を空けたりするときに便利です。
04
応用例・注意点
関係を表すセレクタ（結合子）
| 書き方 | 説明 |
|---|---|
A B | 子孫：A の中にある B すべて |
A > B | 子：A の直下にある B だけ |
A + B | 隣接兄弟：A のすぐ次の B（1つだけ） |
A ~ B | 一般兄弟：A より後ろの兄弟の B すべて |
2つ目以降のカードにだけ上の余白を付ける
「カードの次のカード」を指定すると、最初のカードには余白が付きません。
CSS
1.card + .card {
2 margin-top: 16px;
3}
注意点
- 01前にある要素は指定できません（B のすぐ前の A、という指定はできない）。
- 02A と B の間にほかの要素が1つでも入ると当てはまりません。