+ セレクターって何ぞ?
`+` セレクターは CSS の隣接兄弟結合子(Adjacent Sibling Combinator)と呼ばれ、特定の要素の直後に位置する兄弟要素を選択するために使用されます。
基本構文:
要素1 + 要素2 { スタイル }
これは「要素1の直後に来る要素2」を選択します。
具体例1:
<div>First div</div>
<p>First paragraph</p>
<p>Second paragraph</p>
<p>Third paragraph</p>
この HTML に対して、以下の CSS を適用すると:
div + p {
color: red;
}
この場合、「First paragraph」のみが赤色になります。なぜなら、これが `<div>` の直後にある唯一の `<p>` 要素だからです。
`+` セレクターの主な特徴:
直接隣接する要素のみを選択します。
同じ親要素を持つ要素間でのみ機能します。
左側の要素が右側の要素の直前になければなりません。間に何かが挟まると機能しません。
このセレクターは、特定の要素の後に来る要素にのみスタイルを適用したい場合に非常に便利です。例えば、リスト項目間のスペースを調整したり、フォーム要素間の関係を視覚的に表現したりする際によく使用されます。
具体例2:
.about-text + .about-text {
margin-top: 16px;
}
この CSS コードは「.about-text クラスを持つ要素の直後に別の .about-text クラスを持つ要素がある場合、その2番目の要素の上部マージンを16ピクセルに設定する」という指示です。
これは、同じクラスを持つ要素が連続して配置されている場合に、2番目以降の要素に上部の余白を追加するために使用されることが多いパターンです。例えば、複数の段落や他のコンテンツブロックの間隔を調整するのに役立ちます。