CSSセレクタの詳細度

CSSが適用されない原因になりやすい「詳細度」について整理しました。

詳細度とは

CSSの詳細度とは、同じ要素に複数のスタイルが指定された場合に、どのスタイルを優先して適用するかを決めるルール です。

詳細度の計算方法

セレクタは「点数」で表現でき、以下のルールで計算します。

セレクタの種類	点数
IDセレクタ	1.0.0
クラスセレクタ、属性セレクタ、擬似クラス	0.1.0
要素セレクタ、擬似要素	0.0.1
ユニバーサルセレクタ（*）	0

 

点数の合計が大きいほど、詳細度は高くなります。

詳細度とは別の優先度

CSSには、詳細度とは別に優先度を左右する仕組みがあります。
ただし、いずれも多用すると保守性が下がるため、必要最小限に留めるのが望ましいです。

!important

指定したプロパティを強制的に適用し、最も優先度が高くなります。
通常の詳細度ルールを無視してしまうため、安易に使うのは避けましょう。

インラインスタイル

HTMLタグの style 属性で直接指定する方法です。
外部スタイルシートよりも優先され、 !important の次に強力です。

まとめ

CSSの詳細度は、スタイルが競合したときにどれを優先するかを決める大切な仕組みです。
基本ルールを理解しておけば、「なぜ思った通りに反映されないのか？」という悩みを減らすことができます。

・ID > クラス > 要素 > * の順に強い
・点数方式で詳細度を比較できる
・!important やインラインスタイルはなるべく避ける

迷ったときは、この優先順位を思い出してみましょう。