CSSの特異性と:where()を使ったスタイル管理

はじめに

CSSでは、同じ要素に複数のスタイルが当たることがあります。そのとき「どのスタイルを優先するか」を決める仕組みを 特異性（specificity） といいます。この記事では特異性の基本と、特異性を0にして扱いやすい:where()の実用例を紹介します。

特異性とは？

特異性は、スタイルの「強さ」を数値のように扱う考え方です。数値が高い方が優先されます。

• 要素セレクタ（例: p, h1） → 弱い（1ポイント）
• クラスセレクタ（例: .btn, .article） → 中くらい（10ポイント）
• IDセレクタ（例: #header） → 強い（100ポイント）
• インラインスタイル（例: <p style="color:red">） → とても強い（1000ポイント）

例

p {
  color: blue;   /* 特異性 1 */
}

.article p {
  color: red;    /* 特異性 10 + 1 = 11 */
}

結果は「赤色」が適用されます。なぜなら .article p の方が特異性が高いからです。

:where()の特徴

:where() は CSS Selectors Level 4 で追加された疑似クラスです。特徴は 特異性が常に0 になることです。

基本の使い方

:where(h1, h2, h3) {
  margin-bottom: 1rem;
}

→ 見出しタグすべてに余白をつけられます。ただし特異性は0なので、あとから簡単に上書きできます。

実用例

1. 全見出しに共通スタイル

:where(h1, h2, h3, h4, h5, h6) {
  font-family: "Noto Sans JP", sans-serif;
  line-height: 1.5;
}

→ 見出しすべてにベーススタイルをまとめて適用。

2. フォーム要素のリセット

:where(input, select, textarea, button) {
  font: inherit;
  margin: 0;
}

→ 各フォーム要素をリセットし、デザインを整えやすくする。

3. 長いセレクタの簡略化

.article :where(h2, h3) + p {
  margin-top: 0;
}

→ .article h2 + p, .article h3 + p を短く書ける。

:is()との違い

• :is() → 通常の特異性を持つ
• :where() → 常に特異性0

例

:is(h1, h2) {
  color: red;
}

:where(h1, h2) {
  color: blue;
}

同じ状況で両方が当たる場合、:is() の赤が優先されます。

まとめ

• 特異性 = CSSの優先度を決める仕組み
• 強さの目安 → 要素 < クラス < ID < インライン
• :where() は特異性0なので ベーススタイルやリセットCSSに最適

:where() を使うと、共通のスタイルをまとめつつ、あとから簡単に調整できるシンプルなCSS設計が可能になります。