こんにちは、mickです。
スタイルシートであるCSSの記述順の優先順位（カスケード順）についておさらいしたいと思います。
CSSはカスケードで組み合わさる
CSSは、複数おなじような設定（セレクタやプロパティ、値）を設定しても動作するようにできてます。
CSSがカスケーディングスタイルシートという名にもあるようにカスケードのルールが決まっているからです。
カスケードとは
カスケードは、異なるソースから来るプロパティ値を組み合わせる方法を定義するアルゴリズムです。
MDN Web Docs「CSS カスケード入門」
CSSはカスケードという仕組みで、いろんなファイルに書いたCSSファイルをひとつのCSSファイルにしたときに動作するようにできています。
カスケードは水階段
カスケードのイメージは水階段（複数のCSSファイルでできた階段）。
いくつかの層（CSSファイル）にでできた水階段は下に降りれば降りるほど水（CSSの記述）が混ざっていきます。
水が一番下の段に降りたときにはすべての水が混ざった状態。
CSSでいえばひとつのCSSファイルにまとまった状態といえます。
CSSではカスケードしたときに優先順位が決まっています。
これがいわゆるCSSの記述の優先順位になるわけです。
この優先順位は、カスケード順、と言ったりします。
3つのスタイルシートの種類
スタイルシートには大きく3つの種類があります。
- ユーザーエージェントスタイルシート
- ユーザースタイルシート
- ページ作成者スタイルシート
まずはこの3種類でカスケード順が決まります。
ユーザーエージェントスタイルシート
ChromeやSafari、FirefoxにEdgeなどブラウザがもっているスタイルシートです。
ユーザースタイルシート
ブラウザを使うユーザーが自分でカスタマイズしたスタイルシートです。
ページ作成者スタイルシート
Webサイトをつくる人がWebサイトのデザインのために書いたスタイルシートです。
基本的にページ作成者スタイルシートでWebサイトの見た目（外観、テーマ）が決まります。
!important宣言
3種類のスタイルシートのカスケード順は、!important宣言で変えることができます。
3種類のスタイルシートのカスケード順
3種類のスタイルシートと!important宣言を組み合わせると次のようなカスケード順になります。
下に行くほど（水階段の下に行くほど）優先度が高くなります。
| 優先度 | スタイルシート | 宣言 |
|---|---|---|
| 6 | ユーザーエージェントスタイルシート | ｰ |
| 5 | ユーザースタイルシート | ｰ |
| 4 | ページ作成者スタイルシート | ｰ |
| 3 | ユーザーエージェントスタイルシート | !important |
| 2 | ページ作成者スタイルシート | !important |
| 1 | ユーザースタイルシート | !important |
注意点としては、!important宣言が付くと、ユーザースタイルシートのカスケード順が一番高くなる点ですね。
それぞれのスタイルシートは、複数のCSSファイルがあります。
同列、例えば同じページ作成者スタイルシートの場合は、詳細度というルールでカスケード順、優先順位が決まっています。
同じスタイルシートは詳細度で優先順位が決まる
同じスタイルシートの中に同じセレクタがあるときは、詳細度というルールで優先順位が決まります。
詳細度が大きい（優先度が高い）方から高い方に並べています。
| 優先度 | セレクタ |
|---|---|
| 1 | !importantが付いたセレクタ |
| 2 | インラインに記述したセレクタ |
| 3 | IDセレクタ |
| 4 | クラスセレクタ 属性セレクタ 擬似クラス |
| 5 | 要素セレクタ 擬似要素 |
!importantが付いたセレクタ
!importantのサンプル
p { color: green !important; }インラインに記述したセレクタ
インラインに記述したセレクタのサンプル
<p style="color: red;">インラインセレクタ</p>IDセレクタ
IDセレクタのサンプル
#logo { font-size: 2rem; }クラスセレクタ、属性セレクタ、擬似クラス
クラスセレクタのサンプル
.subtitle { color: red; }属性セレクタのサンプル
input[type="button"]{ color:blue; }擬似クラスのサンプル
a:hover { color: orange; }要素セレクタ、擬似要素
要素セレクタのサンプル
p { color: red; }擬似要素のサンプル
p::before { content: ' '; }!important宣言は使い方が難しい
!important宣言が付いていると、もともとセレクタで決まっている詳細度を無視する結果になります。
だからどのセレクタに!important宣言を付けたがわからなくなってしまうと、大変。
書き換えたスタイルシートがWebサイトに反映されないことが起こります。
同じ詳細度なら後に記述した方が優先度が高い
同じ詳細度、つまり同じセレクタを書いた場合は最後に記述したセレクタが一番優先度が高くなります。
まとめ。
スタイルシートであるCSSの記述順の優先順位（カスケード順）についておさらいしました。
優先順位をざっくりまとめると。
- スタイルシートの種類と!important宣言でカスケード順が決まる
- 同じスタイルシートでは詳細度で優先度が決まる
- 同じ優先度は後に記述した方が優先される（カスケード順）
多くの場合、ページ作成者スタイルシートの中での詳細度がカスケード順のキーになってくると思います。
簡単に覚えると「最終的にCSSとHTMLが1つのテキストファイルになったとき、最後に書かれたセレクタが採用される」だと思います。
ただし、例外は!important宣言の存在です。
カスケード順を狂わせる強力な宣言なので、使い方には注意したいです。
以上、みなさまの助けなれば幸いです。
初稿 2020/10/05
