CSSの優先順位ってどうなっているの？

ある日、後輩から不意に飛んできた質問です
「基本的に後勝ちだから、最後に定義されたスタイルが適用されるよ」と
何気なく回答したんだけど、いざ、その詳細は・・・

気になったら試してみよう
ということで、一つずつ確認していきます

定義方法は何通りあるのか？

そもそものスタイルを指定する方法をおさらいします

実務で使うパターンを考えると、CSSファイルを作成して
ヘッダ部で読み込み、classやidでスタイルを適用するのが多いと思います

では、どのような順番で定義、すると適用されるスタイルが変わるのか？
というところを試していきたいと思います

検証方法は、同じタグに対して異なる手法で、同じスタイル属性を別々の値で設定する
どちらの設定値が有効となっているのかを確認する流れとします

このサンプルを見てわかることは
・ヘッダ部で定義したスタイルはclass属性＝”test”に対して有効
・タグそのものにstyle属性が設定されていて、且つfont-sizeという同じプロパティに関する記述があるとタグ自体に記述されている内容が優先的に適用される

簡単に言えば、「直書き最強」ですね

では、別のパターンも試してみよう
次はCSSファイルを用意するパターンです

CSSファイルに同じくfont-sizeの指定をしていますが、
先程のサンプルと同じ見た目になっています
これはCSSファイルが最初に読み込まれた後に
ヘッダ、タグ自体のスタイルが読み込まれている為です

ここでもやはり「直書き最強」ということが証明されました

では、CSSファイルの記述を全く生かせないのか？というと
そうでもありません
別のプロパティはそのまま生かされます

See the Pen Untitled by 土井翔平 (@bb-shohei-doi) on CodePen.

CSSファイルに文字色を赤にする記述を足してあります
colorの指定はCSSファイルにしか書かれていないので
上書きされることなく生き残っているのです

では、同じプロパティは必ず後勝ちになるのか？というと
これまたそうでもありません

“!important” <重要> というアピールをすることによって、上書きされることを回避できます
先程までは文字サイズがバラバラだったのに、CSSファイルの定義が最強となり
フォントサイズが統一されましたね

最強という表現は常に怪しいものです
確かに、先程の例では上書きされることを回避できましたが
!importantが連続して定義されたらどうでしょう？

やはり後勝ちになってしまいます
ということで、!importantを記述したからといって
必ず上書きを回避できるとは限りません

このような事も視野に入れてスタイル定義の設計を考える必要があります
逆を言えば、importantは乱用するとわけがわからなくなります

・基本的には記述した順序（読み込む順序）に従って、同じプロパティは上書きされる
・上書きを回避するには!importantが有効
・!importantも後勝ちとなる

上記特性が分かったと思います。

他にもJavaScriptでStyleを弄る方法もありますが
基本的には同じ話で、画面を表示する為にロードした状態では
予め定義していたスタイルが反映され
後からJavaScriptで指定されたスタイルが上書きするという挙動になります

この特性をうまく利用すると、全体的にfont-sizeは16pxにしておきたいけど
あるパーツだけは24pxにしたいといったデザインがしやすくなります

習うより慣れろという言葉がありますが
やはりこういった学習は実際に手を動かして身に着けた方が習得しやすいので
是非、思った通りにスタイルが反映されるか試してみてください

ではでは