たまにCSSが反映しないときがあるけどあれは何だろう･･･
というわけで今回はCSSのセレクタ詳細度について説明していきます。
詳細度と書くとわかりにくいですが、簡単にいうと優先度です。
優先度が高いほど、そこに記載されているCSSが優先されて反映します。
駆け出しコーダーさん程、この詳細度沼にハマりやすいのでしっかり理解して行きましょう！
（私も良くハマってます･･･汗）
詳細度について
詳細度とは、要素に対して最も関連性の高いCSS宣言を決定するために、ブラウザーが使用するアルゴリズムです。
詳細度のアルゴリズムはCSSセレクターの重みを計算し、CSS宣言の中からどのルールを適用するか決定します。
簡単に言うと、指定するセレクタごとにポイントがあり、そのポイントの高低に応じて優先度が変わります。
詳細度の計算方法
ではセレクターの重みを詳細度の高い順から並べてみます。
①ID列 例：#sosuなど 重み： 1-0-0
②CLASS列 例：.sosuや属性セレクタ（[type=”checkbox”]）など 重み： 0-1-0
③TYPE列 例：p,h1,trなど 重み： 0-0-1
④値なし 例：全勝セレクター（*）や疑似クラス 重み：なし
①⇒②⇒③⇒④ の順番に詳細度が高くなっています。
反映するCSSは詳細度の重みで決まります。
重みの数字は左が一番強く、次に真ん中、そして左の順番に優先度が変わります。
重みの桁には越えられない壁があり、どれだけクラス名を繋げてもIDの重みは越えられません。
【例】
#sosu {
color: red; // 詳細度値 1-0-0
}
.sosu .blog h1 {
color: green; //詳細度値 0-2-1
}
上記の例は同じ要素を指しているものとして見た場合、
IDを指定している#sosuのCSSが反映されます。
重みの左の数字が一番優先度が高いのでそれが優先される為です。
もし、重みがまったく同じ数値の場合、最後に宣言されたスタイルが優先されます。
CSSファイルの順番で言うと、下にある方が優先されるわけですね！
色々含めた優先度について
ここまではCSSセレクタの詳細度について説明しましたが、
CSSの反映優先度で見ると例外もあります。
ここではその例外について説明します。
プロパティの優先度の高さ
① !important
② HTML上のstyle属性に書かれたプロパティ
③ IDセレクタ
④ クラスセレクタ 属性セレクタ 疑似セレクタ
⑤ 要素型セレクタ 疑似要素
⑥ CSSの記載が後ろのプロパティ
③～⑥は前述した通り、CSSセレクタの詳細度によって優先度が決まります。
ここでは①と②について説明します。
!important
「!important」が使用されたとき、それがどこであってもCSSスタイルが最優先されます。
セレクタの詳細度とは別の仕様で、他のあらゆるプロパティを上書きするのでもっとも優先度が高くなります。
同じプロパティに「!important」が記載された場合は、セレクタの詳細度が適用されます。
HPの修正案件などでは、以外と出くわす「!important」。
皆様は極力使わないようにしましょう。保守性最悪ですので･･･。
HTML上のstyle属性に書かれたプロパティ
要素に追加されたインラインスタイルは、常に外部スタイルシートのスタイルを上書きします。
これもセレクタの詳細度とは別の仕様で、「!important」以外のプロパティを上書きします。
まとめ
というわけで今回は詳細度について説明しました！
CSSがうまく反映されないときはこの詳細度を疑ってみてください。
