【CSS】プラス「＋」記号の意味と使い方

CSS

2022.07.18 2022.07.03

CSS（またはSass）における「＋」（プラス）記号の意味と使い方などについて解説してみます。

CSSにおけるプラス（＋）記号とは何か？

プラス（＋）記号は「隣接セレクタ」と呼ばれるセレクタの一つです。

その名の通り、「とある要素に隣り合っている要素」に対してスタイルを指定したい時に使います。ただし「同じ親要素内、かつ同じ階層（同じ兄弟レベル）で、弟要素のみ」であることが条件です。

つまりいくら同じ親要素内であったとしても、隣り合う要素が兄要素（とある要素よりも前に書かれた要素）の場合はスタイルを効かせることはできないということです。

プラス記号が有効に使える一つの実例がli要素です。

以下にサンプルを載せます。

HTML

<ul class="fruits">
  <li>りんご</li>
  <li>みかん</li>
  <li>ぶどう</li>
  <li>ドラゴンフルーツ</li>
</ul>

CSS（& Sass）

/* CSSの場合 */
.fruits li + li {
  color: red;
}

/* Sassの場合 */
fruits {
  & + & {
  color: red;
  }
}

.fruitsクラスの中のli要素に隣接するli要素（つまり2番目のli要素）の文字色が赤色に変わっていますが、面白いのは2番目のみだけでなく、3番目も、そして4番目のli要素も色が変わっています。

これは「同じ階層同士で隣り合っている」という条件を満たし続けているからです。なので次のような場合は途中でスタイルは適用されなくなります。

See the Pen Untitled by Takuma (@takushin0202) on CodePen.

li要素が続く途中にspan要素が入っています。

このspan要素が同じ階層に現れたことで「同じ階層（同じ兄弟レベル）で隣り合っている」という条件を満たさなくなったため、最後のバナナは同じ階層のli要素にも関わらずスタイルは適用されなくなります。

実務ではヘッダーのナビメニューの横並びで2番目以降のli要素（ないしはa要素）にmargin-leftなんかを効かせたい場合に使える手だったりしますので、ぜひ参考にしてみて下さい。