【基礎の基礎】実践で役立つCSS適用の優先順位

今回の記事では、CSS適用の優先順位の仕組みについて解説していきます。

思ったとおりにCSSが適用されないとき、記載漏れや書き間違いを疑うことはよくあることだと思いますが――

意外と見落としがちなのがCSS適用の優先順位。
特に、ファイルに記載されているCSSが増えてくると比較もしづらく、意図せず優先順位が逆転してしまっているというケースも実はよくあります。

CSS適用優先順位の基本

いちばんの基本は、『後から読み込まれたCSSが優先適用される』、です。
CSSファイルは上から順番に読み込まれていきますので、下に書かれているCSSが優先適用される、と覚えてもよいでしょう。

この基本に加え、指定するセレクタの種類によって以下の優先度の決まりがあります。

【優先度：高】
・ID指定　 （例　#test

【優先度：中】
・Class指定 （例　.test

【優先度：低】
・要素指定 （例　a、p、div等

CSS適用優先順位の応用

更にここからは応用編で、複数のセレクタを使って記述されているケースです。
例えば次のような場合。

①#test .test .example a{}
②#test .test li p {}

このような場合、まずは『優先度：高』のセレクタが含まれている数を比較し、多いほうのCSSが優先適用されます。

数が同じ場合は、次に『優先度：中』のセレクタの数を。
それも同じ場合は、更に『優先度：低』の数を比較し、多いほうを優先適用します。

『優先度：低』の数まで同じ場合は、基本ルールに従い後に記述されているCSSが適当になります。

上記①②の例でいうと、
『優先度：高』の数は同じですが、『優先度：中』の数は①のほうが多いですので、①のCSSが優先適用されることになります。

とはいえ、私もこの記事を書くまではそこまで厳密には覚えていませんでした(笑)。

私は開発のときはChromeの検証機能を使うことが多いです。

これを見れば優先適用になっているCSS、その陰で適用されていないCSSが確認できますし、
その場でCSSを弄れば優先順位の変動も確認できます。

なので、CSSの優先順位があんまりよく分かっていなくても、トライ＆エラーでまあ、実際はなんとか開発できてしまうものです。