CSS詳細度(specificity)の基本

このレッスンでは、CSSの詳細度(specificity)という概念を学び、複数のスタイルが競合したときの優先順位を理解することを目標にします。「CSS 詳細度 とは」「CSS 優先順位」で調べている方向けです。

同じ要素に複数のスタイルが指定されているとき、どちらが優先されるかを決めるルールが詳細度(specificity)です。目安として「idセレクタ > クラスセレクタ > タグセレクタ」の順に強くなります。

サンプルコードでは、タグセレクタ(p)・クラスセレクタ(.highlight)・idセレクタ(#special)の3つで異なる色を指定し、それぞれの強さの違いを確認しています。同じ.highlightクラスを持つ2つの段落でも、idの有無によって最終的な色が変わる様子が確認できます。

初心者がよくつまずくのが、後から書いたCSSが常に優先されると勘違いしてしまうことです。実際には詳細度の強いセレクタが優先されるため、後に書いても詳細度が弱ければ上書きされません。「CSSを書いたのに反映されない」という初心者がよくつまずくトラブルの多くは、この詳細度の勘違いが原因です。

仕組みを理解しておくと、意図しない上書きに悩まされることが大きく減ります。大規模なプロジェクトでは、詳細度をむやみに強くしすぎないようクラスセレクタを中心に設計する、という指針が広く採用されています。