【入門編】詳細度（Specificity）の計算ルール – CSS実践ガイド

こんにちは！CSSの世界へようこそ。
フロントエンドの荒波を長年乗り越えてきた身として、今日はお話ししたいことがあります。

CSSを書いていて、「あれ？なんでこのスタイルが反映されないんだ？」と頭を抱えたことはありませんか？まるで魔法のように色が塗れたり、逆に何をしてもびくともしなかったり……。

実はそれ、CSS界の「身分制度」とも言える「詳細度（Specificity）」というルールが裏で働いているからなんです。今日はこの、CSSを操るための「隠しパラメータ」について、肩の力を抜いてお話ししましょう。

—

詳細度とは、ブラウザが「どのスタイルを優先して適用すべきか」を判断するための「重み付けスコア」のことです。

たとえ話にしましょう。あなたがとあるショッピングモールで、店員さんに「この服をください」と伝えるとします。そのとき、店員さんは誰の意見を一番優先するでしょうか？

1. 通りすがりの人（タグセレクタ：`div`など）
2. 店内の常連さん（クラスセレクタ：`.item`など）
3. 店長さん（IDセレクタ：`#special-item`など）

もちろん、店長さんの指示が一番強いですよね。CSSもこれと同じ。「どれだけピンポイントに指定しているか」が高いほど、優先権が得られる仕組みなんです。

—

詳細度は「0, 0, 0」という3つの数字の並びで決まります。左に行くほど「VIPランク」が高いと考えてください。

/ タグセレクタ: 0, 0, 1 /
p { color: gray; }

/ クラスセレクタ: 0, 1, 0 /
.text { color: blue; }

/ IDセレクタ: 1, 0, 0 /
main { color: red; }

もし、ひとつのHTML要素にこれら全てが適用されたらどうなるでしょうか？
合計スコアが一番高い「ID（1, 0, 0）」が勝者となり、文字色は必ず赤になります。どんなに他のセレクタが頑張っても、IDの壁はとても厚いんです。

—

ここからが少し複雑ですが、楽しいところです。セレクタを組み合わせると、スコアは加算されます。

/ タグセレクタ＋クラスセレクタ /
/ 0, 0, 1 + 0, 1, 0 = 0, 1, 1 /
div.text { color: green; }

/ クラスを2つ重ねた場合 /
/ 0, 1, 0 + 0, 1, 0 = 0, 2, 0 /
.box.text { color: yellow; }

「あれ？ 0, 2, 0 のほうが 0, 1, 1 よりも強いの？」と気づいたあなたは素晴らしい！そう、真ん中の数字（クラス）が多いほうが、結果として優先度が高くなるんです。

—

ここで、現場で生き残るための「鉄則」を一つだけ。

「IDセレクタは、できるだけ使わない」

これが、大規模なWebサイトを作るプロたちが辿り着く結論です。なぜなら、ID（1, 0, 0）は強すぎて、後から「ちょっと色を変えたいな」と思ったときに上書きするのが非常に大変だからです。

最初は「クラスセレクタ（.class）」をメインに使って、詳細度をフラットに保つ癖をつけると、後々自分のコードに苦しめられることが減りますよ。

—

以下のコードを自分のエディタに貼り付けて、ブラウザで確認してみてください。どの文字が何色になるか、予想しながらいじってみるのが一番の近道です。

この文字は何色になるでしょう？

解説：
一番下の `#box { color: red; }` が適用されているように見えますが、実は中の `

` タグは自分のスタイルを持っていないので、親の赤色を継承しているだけかもしれません。もし `

` に直接色を指定したらどうなるか……ぜひ実験してみてください。

CSSは、最初はルールが多くて難しく感じるかもしれません。でも、この「詳細度のパズル」を解けるようになると、Webデザインがまるでレゴブロックを組み立てるように楽しくなってきます。

焦らず、少しずつ、自分のペースで楽しんでくださいね。応援しています！