CSS隣接兄弟セレクター (A + B) — 直後の要素
別の兄弟要素の直後に続く要素をターゲットするCSS隣接兄弟コンビネータ(+)を学びます。間隔、タイポグラフィ、条件付きスタイリングパターンに最適です。
Combinators
詳細な説明
CSS隣接兄弟セレクター
隣接兄弟コンビネータ（+）は、別の要素の直後の兄弟である要素を選択します。両方の要素は同じ親を共有する必要があります。
構文
/* <h2>の直後に続く<p>に上マージンを追加 */
h2 + p {
margin-top: 0.5rem;
font-size: 1.1rem;
}
一般的な使用例
ロボトマイズドオウル（* + *）:
/* 隣接する兄弟間に垂直間隔を追加 */
.stack > * + * {
margin-top: 1rem;
}
タイポグラフィの洗練:
/* 見出しが見出しに続く場合、上マージンを削除 */
h2 + h3 { margin-top: 0; }
詳細度
両方の部分の合計：h2 + p = (0, 0, 2)。
ユースケース
隣接兄弟セレクターは、異なる見出しレベルと段落間の間隔を制御するタイポグラフィシステムで広く使用されています。「ロボトマイズドオウル」パターン（> * + *）は現代CSSで人気の間隔テクニックです。フォームバリデーションパターンでは、無効な入力の後にエラーメッセージを表示するために使用されます。