SCSSの「+」「>」ってなに？記号セレクタの使いどころとは

SCSS（およびCSS）の記号セレクタは、単なる書き方の違いではなく、設計・保守性・バグの出やすさに直結する重要な要素です。
scssではなんとなくネストにした方が分かりやすい気もするところですが、使い方を知ればコードも綺麗に書けるようになります

この記事では「何ができるか」ではなく、実務でどう使い分けるべきかにフォーカスしていきます。

1. >（子セレクタ）

直下の子要素だけを対象にします。

.card > p {
  color: red;
}

▼ HTML構造

<div class="card">
  <p>これは赤</p>
  <div>
    <p>これは対象外</p>
  </div>
</div>

■ なぜ使う？

• 意図しないネストへの影響を防ぐ
• コンポーネントの構造を固定できる

■ よくあるミス

.card p { ... }

ネストが増えた瞬間にバグる

2. +（隣接兄弟セレクタ）

直後の1つの要素のみに適用されます。

h2 + p {
  margin-top: 0;
}

■ なぜ使う？

• 「この要素の次だけ」というピンポイント制御ができる
• 余計なクラスを増やさなくて済む

■ 実務例

.form-label + input {
  margin-top: 4px;
}

3. ~（一般兄弟セレクタ）

後ろにあるすべての兄弟要素に適用。

h2 ~ p {
  color: gray;
}

■ なぜ使う？

• 「ここから後ろ全部」という制御ができる

4. &（親参照 / SCSSの核）

親セレクタをそのまま再利用できます。

.button {
  &--primary {
    background: blue;
  }

  &:hover {
    opacity: 0.8;
  }
}

■ なぜ使う？

• クラス名の重複を防ぐ
• 構造を保ったまま記述できる

5. :（疑似クラス）

a:hover {
  color: red;
}

li:first-child {
  font-weight: bold;
}

■ 役割

• ユーザー操作（hover, focus）
• 要素の位置（first, last, nth）

6. ::（疑似要素）

p::before {
  content: "▶";
}

■ なぜ使う？

• 装飾のためにHTMLを増やさなくて済む

7. []（属性セレクタ）

input[type="text"] {
  border: 1px solid #ccc;
}

■ なぜ使う？

• クラスを増やさずに条件分岐できる

8. *（ユニバーサルセレクタ）

* {
  box-sizing: border-box;
}

■ 注意点

• 全要素に影響する
• パフォーマンスに影響する可能性あり

実務でのベストパターン

.card {
  > .title {
    font-size: 20px;
  }

  > .title + p {
    margin-top: 0;
  }

  &:hover {
    transform: scale(1.02);
  }
}

• > → 構造を守る
• + → 微調整
• & → 状態管理

まとめ

• > → 構造を固定（最重要）
• + → 直後だけ調整
• ~ → 後ろ全部
• & → SCSSの中心
• : / :: → 状態・装飾

迷ったら「構造は >、微調整は +」を基準にすると失敗しにくいとおもいます。
初学者でも少しずつ必ずできるようになります。そんな方の参考になればと思います。