同じ要素に複数のスタイルがかけられ、競合してしまうことありますよね。
そういう場合、どのスタイルが優先されるかという決まりを、「カスケード」といいます。
「カスケード処理」は以下の順番で行われます。
1. CSS 提供元による優先順位
2. 詳細度による優先順位
3. 記述順位による優先順位
各内容を順番にまとめます。
1. CSS 提供元による優先順位
スタイルシート は Web 制作者が用意するもの以外にも、ユーザ側が用意するもの、ブラウザのデフォルトのものがあり、それらが組み合わさって表示されます。スタイルシートの提供元による優先順位は以下の通りです。
1. Web ページ制作者が用意した 制作者 スタイルシート
2. 閲覧するユーザが用意した ユーザ スタイルシート
3. ブラウザがデフォルトで適用する ブラウザ スタイルシート
ですが、「!important 宣言」がついたものがある場合、提供元による優先順位が入れ替わります。
1. !important 宣言付き ユーザ スタイルシート
2. !important 宣言付き 制作者 スタイルシート
3. 制作者 スタイルシート
4. ユーザ スタイルシート
5. ブラウザ スタイルシート
2. 詳細度による優先順位
セレクタの詳細度（重み）を計算して、高得点のものほど優先されます。
⇒ セレクタの種類について
＜点数＞
| セレクタ | 例 | 点数 |
|---|---|---|
| タグの style 属性に直書き | style=”color: red;” | 1000 点 |
| ID セレクタ | #example | 100 点 |
| クラスセレクタ | .demo | 10 点 |
| 属性セレクタ | [lang=”ja”] | 10 点 |
| 疑似クラス | :link | 10 点 |
| 要素型セレクタ | p | 1 点 |
| 疑似要素 | ::first-line | 1 点 |
| 全称セレクタ | * | 0 点 |
＜計算例＞
| 記述例 | 計算 | 合計 |
|---|---|---|
| style=”color: red;” | 1000（style 属性） | 1000 点 |
| #example | 100（ID セレクタ） | 100 点 |
| div.content.demo | 1（要素型セレクタ）+ 10（クラスセレクタ）+ 10（クラスセレクタ） | 21点 |
| div[lang=”ja”] | 1（要素型セレクタ）+ 10（属性セレクタ） | 11 点 |
| a:link | 1（要素型セレクタ）+ 10（疑似クラス） | 11 点 |
| h1 div + span | 1（要素型セレクタ）+ 1（要素型セレクタ）+ 1（要素型セレクタ） | 3 点 |
| *::first-line | 0（全称セレクタ）+ 1（疑似要素） | 1 点 |
3. 記述順位による優先順位
詳細度が同じものは、単純に後にあるものが優先されます。
CSS でスタイルを指定しているのに反映されない場合、優先順位が問題になってることが多いようです。一度見直しが必要ですね。