こんにちは、さち です！
今回はスタイルシート(CSS)の適用の優先順位について書こうと思います。
この記事は私の備忘録となっていますが、CSSに関わる方に少しでもお役に立てれば幸いです。
1. 記述場所による優先順位
CSSの記述場所には次のような3種類の方法があります。
- 「style=""によるHTMLタグへの直接記入」
- 「headタグ内への<style>～</style>への記述」
- 「外部CSSへの記述」
各記述方法の優先順位は下記の図のとおりです。
CSS を適用させたい場所から近いほどに優先順位が高いと覚えましょう。
| 優 先 順 位 |
高 | ◇style=""によるHTMLタグへの直接記入 |
| ◇headタグ内への<style>～</style>への記述 | ||
| 低 | ◇外部CSSへの記述（metaタグによる外部CSSの読み込み） |
2. セレクタによる優先順位
CSS のセレクタによる優先順位は次のようなルールがあります。
【A】 style属性 がある場合に1を加算
【B】 id の数を加算
【C】 id 以外の属性，擬似クラスの数を加算
【D】 要素，擬似要素の数を加算
実際の例は下記のとおりです。
CSS を適用させたい場所から近いほど優先順位が高い
セレクタの記述が詳細であるほど優先順位が高い
と覚えましょう。
| 優 先 順 位 |
セレクタの例 | 【A】 | 【B】 | 【C】 | 【D】 | |
| 高 | style="" | 1 | 0 | 0 | 0 | |
| #id {} | 0 | 1 | 0 | 0 | ||
| .class[title="name"] {} | 0 | 0 | 2 | 0 | ||
| a:hover {} | 0 | 0 | 1 | 1 | ||
| .class {} | 0 | 0 | 1 | 0 | ||
| div li a {} | 0 | 0 | 0 | 3 | ||
| div + a {} | 0 | 0 | 0 | 2 | ||
| a::first-line {} | 0 | 0 | 0 | 2 | ||
| a {} | 0 | 0 | 0 | 1 | ||
| 低 | * {} | 0 | 0 | 0 | 0 |
最終的には【A】【B】【C】【D】の順に並べた4桁の数字
例えば、『style=""』なら『1000』として
各セレクタを比較し、数値が大きいほど CSS 適用の優先順位が高くなります。
ただし、【A】～【D】のそれぞれの値は10になっても
一つ上の項目（例えば、【D】なら【C】）に繰り上がったりはしません。
3. 無条件で最優先にする
CSSが複雑になってきて
優先順位が分からなくなった場合に便利なのが「!important」 です。
CSS に「!important」をつけることによって
その項目（プロパティと値）が無条件で最優先に適用されます。
div {
margin: 10px;
background-color: #FF0000 !important;
}
例えば、上記の例では
別の場所で div の「background-color」を指定していても
CSS の優先順位が無視されて
div には「background-color: #FF0000」が適用されます。
（margin は通常の優先順位が適用される）
便利な !important ですが、あまり乱用をすると
あとで修正したい時に !important を記述した場所が分からずに
収拾がつかなくなる危険性があります。
こうなると「!important」探しに無駄な時間を費やしてしまうので
「!important」は、必要なとき以外なるべく使わないようにしましょう。
【この記事を作成するのに参考にさせて頂いたサイト様】
コメント