こんにちは。CSSという広大な海に漕ぎ出したばかりのあなたへ。
「なぜかCSSが効かない！」「一生懸命書いたのに、隣の誰かのスタイルに負けてしまう……」
そんな経験、一度はありますよね。僕も駆け出しの頃は、ブラウザのデベロッパーツールと毎日ケンカをしていました。
CSSの「詳細度（Specificity）」は、言わば「Webブラウザの中の裁判官が、どの命令を優先するか決めるための採点基準」です。このルールさえ攻略してしまえば、CSSの効き目に悩まされることはもうありません。
さあ、肩の力を抜いて、一緒に見ていきましょう。
—
CSSの「優先順位」は、お買い物のレジ待ちと同じ？
例えば、スーパーのレジを想像してみてください。
- 一般客（要素）：普通に並んでいる人。
- 会員カードを持っている人（クラス）：少しだけ優先される。
- VIPカードを持っている人（ID）：圧倒的に優先される。
CSSの世界もこれと同じです。「どのくらい強い属性を持っているか」で、ブラウザが勝手に順位付けをしているんです。
詳細度の「3つのスコア」を数えよう
詳細度は、主に以下の3つのグループで計算されます。左側のグループほど、圧倒的に強くなります。
1. ID（アイディー）：`#header` など。めちゃくちゃ強いVIP。
2. クラス・属性・擬似クラス：`.btn` や `[type=”text”]`、`:hover` など。頼りになる常連さん。
3. 要素・擬似要素：`p`, `div`, `span` など。どこにでもいる基本の存在。
この3つのグループを、「100点・10点・1点」の単位で数えると、誰でも直感的に計算できます。
—
実際に計算してみましょう
論より証拠。以下のコードを見てください。
/ 1. 要素セレクタのみ：詳細度 0-0-1 (1点) /
p {
color: gray;
}
/ 2. クラスセレクタ：詳細度 0-1-0 (10点) /
.text-important {
color: blue;
}
/ 3. IDセレクタ：詳細度 1-0-0 (100点) /
main-title {
color: red;
}
もし、ひとつの文字にこれら全てが適用されたらどうなるか？
もちろん、100点のIDセレクタが最強なので、文字は「赤」になります。
つまずきやすいポイント：掛け算の魔法
よくあるのが、複数のセレクタを組み合わせた時です。
/ divタグの中にある、 .active というクラス /
/ 10点(クラス) + 1点(要素) = 11点 /
div.active {
background: yellow;
}
/ divタグの中にある、 pタグ /
/ 1点(要素) + 1点(要素) = 2点 /
div p {
background: white;
}
「11点」vs「2点」。当然、クラスを含んでいる上のコードが勝ちます。
「クラスをひとつ足すだけで、強さが全然違うんだ！」と覚えておくと、今後コードを書くのが少し楽しくなりますよ。
—
禁断の「!important」という切り札
ときどき、どうしてもCSSが上書きできない時に、魔法のような言葉を使いたくなるかもしれません。それが `!important` です。
.my-button {
color: blue !important; / どんな詳細度よりも強引に優先される /
}
これは「力技」です。どんなに高い点数のIDセレクタが来ても、これを書けば強制的に勝てます。
でも、使いすぎには気をつけてくださいね。
例えるなら、レジに並ばず「私はVIPだから！」と無理やり割り込むようなもの。後からコードを直すときに、「どれが本当のルールなのか分からなくなった……」という悲劇を生む原因になります。
「!importantは、どうしても解決できない最後の手段」。この心構えだけで、あなたの書くCSSはぐっとプロっぽくなります。
—
最後に：CSSは「仲良く」書くもの
詳細度の計算ルールを知ることは大切ですが、現場のテクニックとして一番大切なのは、「あえて詳細度を上げすぎない」ことです。
- なるべくシンプルなクラス名（`.card__title` など）で管理する。
- 必要以上にIDセレクタを乱発しない。
- `!important` は「お守り」として心の中にしまっておく。
最初は難しく感じるかもしれませんが、大丈夫。ブラウザは常にあなたと対話しようとしています。もしスタイルが反映されなかったら、「今は誰が勝っているのかな？」とデベロッパーツールを覗いてみてください。
CSSは、あなたの思い描いた通りに世界を彩るための最高のツールです。焦らず、少しずつ仲良くなっていきましょうね。応援しています！
コメント