【脱 !important】CSSの指定をちゃんと下に書いているのに優先されない原因

CSSは「カスケーデイング・スタイルシート」の略で、カスケーディングとはカスケード処理、すなわち複数の指定がある場合は優先度が一番高い指定だけが適用される処理という意味です。

この優先度は下に記述したものほど強くなります。
例えば、下記のような記述だと、

<p>hoge</p>

<style>
p {background-color: yellow;}
p {background-color: red;}
</style>

background-color: red;が優先されてpタグが赤背景で表示されます。

ところが。

かれこれ10年以上コーディングやってますが、最近下に記述しているにも関わらず上の指定が有効になってしまう現象に遭遇しました。
調べてみると、どうやらCSSの優先順位は記述順だけではないとのこと。

うっそ～ん！目からウロコです。

というか、逆によく今まで問題なくコーディングできたなと自分の運の良さ（？）にびっくりしました。

優先順位は「指定方法」によって決まる

基本は後述した指定のほうが優先される、というのは間違っていないのですが、それよりも指定方法によって優先順位が前後します。

例えば、ただのタグ指定と親要素から指定した場合は、上に書かれているにも関わらずbackground-color: yellow;が優先されます。

<div class="hoge">
  <p>hoge</p>
</div>

<style>
.hoge p {background-color: yellow;}
p {background-color: red;}
</style>

他にも、擬似クラス指定やid属性指定などいろいろありますが、それぞれの指定法に点数が割り振られており、その合計点が高い指定が優先される、という仕様らしいです。

点数はA、B、C、Dの4つの階級に分けられており、Aに行くほど優先度が強くなります。
各階級に該当する加算要素がいくつあるかを数えて、ポイントが高いほうが優先されます。

例えば、

p.hoge[title] {background-color: yellow;}
div.fuga p {background-color: red;}

こちらの例だと、上の指定は「.hoge」＋「[title]」でC級2点、「p」でD級1点です。
一方、下の方は「.fuga」でC級1点、「div」＋「p」でD級2点です。
この場合は両方とも最上級がC級なので、C級ポイントの高い上のbackground-color: yellow;が優先されます。

前回級とも同じポイントだった場合は、基本的な仕様により下の記述が優先されます。

ちなみに、全称セレクター「*」はどの階級においても0ポイントです。

こうしてみると「!important」ってマジで魔法の言葉ですよね。
A級の直書きstyleもぶち壊して文字通りの”最優先”の指定になります。

しかし、同じ指定先で「!important」が使われていた場合は、やはり上のポイント制で優先順位が決まり、それでも同店だった場合は下の記述が優先されます。

まあ、そもそもほとんどのコーダーは「!important」を嫌っているのでなるべく使いたくはないですよねえ。

僕もどうしようもない時は乱用していましたが、今回この仕様を知ってより健全なコードを書くことができそうです。