CSSの「詳細度（Specificity）」とは？仕組みと実践的な対処法を解説

CSSでは、セレクターの「強さ」を数値で判断する仕組みが採用されています。この強さ、すなわちどのセレクターが最も力を持つかを表す概念が詳細度（Specificity）です。詳細度が最も高いセレクターは、他の弱いセレクターによってどんなスタイルが適用されていようと、常にHTML要素の見た目を決定づけます。

たとえばbutton要素にスタイルを当てたい場合、その方法は一通りではありません。CSSでよく使われるセレクターは、type（要素型）、class（クラス）、idの3種類です。

3つの基本セレクターと優先順位

まず、要素型セレクターを使って要素に直接スタイルを適用する方法です。

button {
  background-color: red;
}

次に、class属性を使う方法です。

.button {
  background-color: red;
}

さらに、id属性を使うこともできます。

#button {
  background-color: red;
}

各セレクターには数値としての値が割り当てられています。ここで疑問が生まれます。上記の3つ（type、class、id）が同じ値（1）を持つなら、同じスタイルシート内で使われたとき、どのルールセットが勝つのでしょうか？

答えはIDセレクター（#button）です。IDはクラスや要素型セレクターよりも優先されるためです。

では、IDが絡まない場合はどうなるでしょうか？

その場合はクラスセレクター（.button）が勝ちます。クラスは要素型セレクターよりも優先されるからです。

待ってください、「カスケード（Cascade）」との関係は？

CSSは「Cascading Style Sheets（カスケーディング・スタイル・シート）」の略です。すべての条件が同等である場合、スタイルシート内で最後に記述されたセレクターが勝ちます。

たとえば、スタイルシートに同じ名前のクラスを3つ追加したとしましょう（.hero-button）。それぞれ同じプロパティ（background-color）を対象としながら、異なる値（緑・青・赤）を設定しています。

.hero-button {
	background-color: green;
}

.hero-button {
		background-color: blue;
}

.hero-button {
	background-color: red;
}

そして、この3つすべてを同じHTML要素に適用します。

<button class="hero-button">Button</button>

すると、スタイルシート内で最後に記述された.hero-buttonクラスが、同じ名前を持つそれ以前のクラスよりも優先され、ボタンの背景色は赤になります。これがCSSカスケードの仕組みです。詳細度の順序は上から下へと決まり、一番下のセレクターが勝者となります。ただし、これはすべての条件が揃っている場合にのみ100%当てはまる点に注意してください。

重要：同じ名前のセレクターが複数ある場合、スタイルシートの下にあるものが、以前の同名セレクターによるすべてのスタイルを上書きするわけではありません。上書きされるのは、指定されたプロパティだけです。

混乱しましたか？

心配いりません。すぐに理解できるようになります。

先ほどの3つの.hero-buttonクラスに、最初の2つへ追加のスタイルプロパティ（paddingとfont-size）を加えてみましょう。

.hero-button {
  background-color: green;
  padding: 2rem;
}

.hero-button {
  background-color: blue;
  font-size: 2rem;
}

.hero-button {
  background-color: red;
}

スタイルシートには同じ名前の3つのCSSクラスがあり、すべてが同じbackground-colorプロパティでHTMLのbutton要素を狙っています。しかし、最初の2つのクラスには追加のスタイルプロパティがあります。さて、結果はどうなると思いますか？

実際の結果はこちらで確認できます。

https://codepen.io/StrengthandFreedom/pen/mdyMGPL

ご覧のとおり、button要素は3つの.hero-buttonクラスのスタイルプロパティをすべて積み重ね（結合し）、次の3つのプロパティをすべて受け取ります。

  padding: 2rem;
  font-size: 2rem;
  background-color: red;

つまり、スタイルシート内に同名のCSSセレクターが存在する場合、プロパティが上書きされるのは、セレクター同士が同じプロパティを対象としているときだけです。

上の例では、3つのクラスすべてがbackground-colorプロパティを対象としており、ここではCSSカスケードのルール（出現順序による詳細度）により、一番下のクラスが勝ちます。しかし、スタイルシート末尾の.hero-buttonクラスはpaddingもfont-sizeも対象としていないため、最初の2つのクラスによるこれらのプロパティは、そのままbutton要素に適用されるのです。

なぜこの仕組みの理解が重要なのか

あえて繰り返し説明するのは、大規模で整理されていないCSSコードベースに直面する場面が、開発者であれば必ず訪れるからです。複数の開発者が関わった結果、メンテナンスが困難になっているプロジェクトは決して珍しくありません。

最もよくあるシナリオのひとつが、別の開発者がすでにどこかに存在するCSSクラスと同じ名前のクラスをスタイルシートに追加してしまうケースです。先ほど見たように、CSSはプロパティを積み重ねる性質があるため、この挙動を知らない、あるいは忘れていると、たちまち混乱のもとになります。

たとえば、次のようなプロパティを持つprimary-buttonというCSSクラスを追加したとします。

.primary-button {
  background-color: red
  padding: 1rem;
  font-size: 1.125rem;
}

ところが、なぜかボタンに影（シャドウ）が表示されてしまいます。自分では追加していないのに、です。原因として考えられるのは主に2つあります。ひとつは、誰かがbutton要素そのものに直接スタイルを適用しているケース。

button {
 box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
}

もうひとつは、以前に誰かがスタイルシートに同名のクラスを追加し、そこにbox-shadowプロパティを記述していたケースです。

.primary-button {
 box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
}

望ましくないスタイルを取り除くには、コードベース内の該当箇所を見つけて削除するか、自分の.primary-buttonクラスで直接対象として上書きします。

.primary-button {
 background-color: red
 padding: 1rem;
 font-size: 1.125rem;
 box-shadow: 0; /*既存のbox-shadowの値を打ち消す*/
}

「こんな解決策は泥臭すぎる」と思いましたか？　その通りです。しかし、経験を積んだ開発者なら誰でも共感できるように、巨大で整理されていないプロジェクト（レガシーコードだらけの案件など）に遭遇することは少なくありません。しかも、既存のCSSコードすべてにアクセスできないこともあります。こうした状況では、既存コードを自由に修正することはできず、上書きするしかありません。だからこそ、CSSの詳細度とソース順序（Source Order）の仕組みを知っておくことが重要になるのです。

なお、Web上には「Specificity Calculator（詳細度計算ツール）」を提供しているサイトがあり、グループセレクター（セレクターの組み合わせ）を含むさまざまなCSSセレクターの詳細度を簡単に比較できます。

まとめ：詳細度の問題を避けるためのコツ

CSSの詳細度に関するトラブルを回避する良い方法は、UIのスタイリングを主にクラスで行い、IDの使用は必要最小限にとどめることです。また、可能であればグループセレクターも避けましょう。成長し続けるコードベースでは、予測不能な問題を引き起こす原因になりえます。