CSSの読み込みに優先順位があることを知っていますか？

プロパティを記述したのに、なぜか反映されない…という現象、
コーディングをしていると、一度は経験したことあるのではないでしょうか。

ブラウザの更新、キャッシュの消去、
誤字していないかのチェック、
データのアップロードしなおし…

思いつくことは全部やったのに、何がいけないんだろう？

そんなときは
CSSの読み込む優先順位が関係しているかもしれません。

この記事では、CSSの読み込む優先順位について解説していきます。

１、CSSの優先順位とは？

CSSには、指定したプロパティが読み込まれる優先順位があります。
優先順位は、以下のルールによって決まっています。

１．セレクタの指定の仕方
２．記述箇所と読み込む順番

まずは、１つ目の「セレクタの指定の仕方」から解説します。

２、CSSの優先順順位：セレクタの指定の仕方

まずは、以下の例を見てください。

【HTML】

上記に以下のようなCSSを適用します。

【CSS】

【結果】

４つCSSを記述しましたが、順に見ていくと、

「sampleの中のpを赤色にしてください」
「sampleの中のaを黄色にしてください」
「sampleとpの中のaを青にしてください」
「sampleの中のtxtというクラスの中のaを緑にしてください」

という指定です。

４つは全て「サンプル」という文字に対して指定されていますが、
反映されたのは一番最後に記述した
「sampleの中のtxtというクラスの中のaを緑にしてください」
という指定です。

これは「より詳しく書かれたセレクタを優先して反映する」
というブラウザの性質が関係しています。

この性質を詳細度と呼びます。

詳細度は点数式で評価されており、
より点数の高いセレクタの指定が反映される仕組みになっています。

セレクタの点数の低い順に並べると、以下のようになります。

全称セレクタ（*）	点数：0.0.0.0
タイプセレクタ（h1,div,pなど）	点数：0.0.0.1
クラスセレクタ（.example）	点数：0.0.1.0
ID セレクタ（#example）	点数：0.1.0.0
インラインスタイル（タグに直接記述）	点数：1.0.0.0

上記の条件に当てはめると、

「sampleの中のtxtというclassの中のaを緑にしてください」という指定は

”クラスセレクタ”2つと”タイプセレクタ”の指定で、
他の指定よりも点数が高いので、
優先して読み込まれたということになります。

WEBサイトを実際に構築していくと、
いたるところにpタグとaタグを使うことになります。

特定のセレクタ部分だけスタイルを変更したい場合は、
詳細度を意識しながら指定すると、間違いはなくなるでしょう。

どうしてもスタイルが適用されず困った場合は、
以下のサイトでセレクタの点数を計算することもできますので、活用しましょう。

Specificity Calculator

２-1、指定するセレクタの近さ

詳細度が同じセレクタでも、セレクタ同士の距離が違うと、読み込む優先順位が変わります。

【HTML】

【CSS】

【結果】

このように詳細度が同じセレクタでは、
セレクタ同士の距離が違いものが優先して反映されます。

３、CSSの優先順順位：読み込む順番

先ほどの章で説明した通り、
CSSは、セレクタの詳細度で読み込む優先順位が決められます。

では、詳細度の点数が同じ指定の場合は、
どちらのCSSが読み込まれるのでしょうか？
実際に見てみましょう。

【HTML】

【CSS】

【結果】

このように同じセレクタの詳細度で複数指定をした場合、
後に書かれたCSSが優先して読み込まれます。

３-1、【詳細度】と【読み込む順番】の優先順位

では、「詳細度の点数が高い指定」が「詳細度の点数の低い指定」より先に書かれていた場合を見てみましょう。

【HTML】

【CSS】

【結果】

上記のように、「詳細度の点数が高い指定」が、「詳細度の点数が低い指定」の前に書かれている場合は、「記述箇所」よりも「セレクタの詳細度」が優先され、
詳細度の点数の高い指定が反映されます。

.sample04 .txt04 a　の詳細度点数	0.0.1.0　+ 0.0.1.0 ＋ 0.0.0.1 ＝0.0.2.1点
.sample04 p a　の詳細度点数	0.0.1.0 ＋ 0.0.0.1 + 0.0.0.1 ＝0.0.1.2点

４、CSSの優先順順位：記述箇所

CSSの記述方法は以下の３つです。

１、headタグ内に直接記述
２、外部ファイルでの読み込み
３、該当するタグに直接記述

この３つの記述箇所では、
どの記述箇所が優先されるのでしょうか？

【HTML】

【外部CSS】

【結果】

３つの記述のうち、タグに直接指定する、インライン記述のスタイルが適用されました。
これは詳細度のうち、インライン記述が一番点数が高いからです。

しかし、インライン記述はタグごとに記述をしなければいけませんし、
全体の文字色を変更するなんてことになった場合は、
莫大な量の作業量になってしまいます。

そういった無駄な作業を省くためにも、
CSSはできるだけ外部ファイルで一括管理するようにしましょう。

では、インライン記述がなかった場合も見てみましょう。

４-1、インライン記述がなかった場合の読み込み優先度

【HTML】

【外部CSS】

【結果】

インライン記述がなかった場合は、外部ファイルに記述されたCSSが適用されました。

これは、外部ファイルが、head内に直接記述したCSSよりも
後に読み込まれているからです。

インライン記述がなかった場合は、
記述した順番で読み込まれるということですね。

まとめ

CSSの読み込みの優先順位をまとめると以下のようになります。

１、CSSには読み込みの優先順位があり、詳細度という点数制が設けられている

▼詳細度で見るCSS読み込みの優先順位・・・
「インライン記述」＞「セレクタの詳細度の点数が高い指定」　＞　「セレクタの詳細度の点数が低い指定」

2、セレクタの詳細度が同じ記述では、セレクタ同士の距離が近いものがより優先して反映される。

3、CSSは後から記述された指定が優先されて読み込まれる

解説したように、CSSは記述した場所や、詳細によって読み込みの優先順位が変わります。
CSSを記述するまえに、どの箇所をどう装飾したいか一度考えてから取り組むと良いですね。