cssが適用されない！？そんな時にチェックしたいcssの「詳細度」

cssの詳細度とは？

同じ要素に対して異なる定義をした場合、どの定義を優先して適用するかを決定する指標です。 定義が優先されるものを、より「詳細度が高い」と表現します。

優先順位

一般的には、以下のような順番で詳細度が決定します。

１）style属性

cssを要素に直接style属性で記述する方法。
#よりも詳細度は高く、一か所にだけstyleを適用させたい場合に使用する。

２）id属性（#）

よく使うセレクタの中では最も優先される。
HTML文書内に一回しか指定できない。

３）属性セレクタ

特定の要素に対してより複雑な条件を指定できる。

[attr]

４）classセレクタ

htmlでは「class=""」、cssでは「.」で記述を始め、任意の命名をする最もよく使用するセレクタ。 HTML文書内に複数回指定できる。

５）タイプセレクタ

divやpなどの要素の名前。

６）全称セレクタ

「*（アスタリスク）」で指定することで、全セレクタに適用させることができる。

※!importantはcss内で作られた他の宣言全てを上書きするので、詳細度とは無関係です。

詳細度の計算方法

詳細度は以下の表の内容を基準にそれぞれのセレクタ数をかけて、最後に全体を足して算出します。 親要素から含めて記述するのか？class名だけを指定して書くのか？だけでも、cssの指定方法によって変わってきます。

事例

cssは基本的に後から書かれたものが優先されますが、記述方法によって詳細度が変わり、適用されるcssも異なります。

どちらのcssが適用されるでしょうか？

この場合の結果は以下になります。
正解はこの色！

事例の解説

上記の詳細度の計算方法を参考に、セレクタの形式や数に合わせて詳細度を計算していきます。

●１番目の詳細度
ul（1）＋li（1）＋.list（10）＝12

●２番目の詳細度
ul（1）＋li（1）＝2

通常は後から書かれた２番目のスタイルが適用されると思われますが、書かれた順番よりも、詳細度の高さが優先されるので、最初に書いた方が適用されることになります。

このように、詳細度の概念を知っておくとマークアップのスピードも格段に上がります。
記載方法は会社ごとのルールがあると思いますが、style属性や!importantはイレギュラー的な使い方なのでなるべく使用せず、それ以外の記述で対応していくことがお勧めです。