CSSの優先度
スタイルには優先度があります。どのスタイルが優先されのかを見ていきます。
あとに記述したものが優先される
p{ color:red; color:green; /* こちらが適用される */ }
プロパティを重複して記述した場合、あとに書いたものが優先されます。適用されないcolor:red;は削除してください。
p{ color:red; } p{ color:green; } /* こちらが適用される */
同じセレクタを複数定義してプロパティを重複して記述した場合も、あとに書いたものが優先されます。同じく適用されないp{ color:red; }は削除してください。
セレクタの種類によって詳細度が決まっている
上記では、要素セレクタの優先度について書きました。ここからは、他のセレクタの場合を見ていきます。
詳細度
まず、セレクタは種類によって点数が割り当てられています。点数を詳細度とするとセレクタの詳細度は以下のようになります。
| セレクタ | 例 | ポイント |
|---|---|---|
| style属性 | style="..." | 1000点 |
| IDセレクタ | #hoge{...} | 100点 |
| クラスセレクタ、疑似クラス | .hoge{...} | 10点 |
| 要素セレクタ、疑似要素 | h1{...} | 1点 |
| *(ユニバーサルセレクタ)など | *{...} | 0点 |
以下はセレクタの詳細度の計算例です。複数のセレクタを指定している場合、その合計点が高いスタイルが適用されます。
- h1 = 1点
- div h1 = 1 + 1 = 2点
- div .item = 1 + 10 = 11点
- div #title = 1 + 100 = 101点
- div #title a = 1 + 100 + 1 = 102点
style属性で指定したスタイルは、点数が高いため優先されやすいです。
記述例
<h1 id="title">このサイトは○○のサイトです</title>
h1{ color:red; } /* 詳細度:1 */ #title{ color:green; } /* 詳細度:100なのでこちらが適用される */
!importantで指定したものは最優先になる
<p style="color:blue;">hello html</p>
/* !importantの書き方 */ /* セレクタ{ プロパティ:値 !important; } */ p{ color:pink !important; }
上記のようなHTMLとCSSの記述があった場合を考えます。
この場合、!importantで指定した値が適用されるため、文字色はピンクになります。!importantの値をさらに上書きしたい場合は、p{ color:pink !important; }のあとにp{ color:skyblue !important; }のように記述します。あとに記述した方が優先されるためです。
p{ color:pink !important; } p{ color:skyblue !important; } /* こちらが適用される */
!importantの注意点
!importantは最優先でスタイルを適用できるので便利ではありますが、最終手段として使うかもしくは使わない方が良いとされています。!importantに頼るとそのコードをさらに上書きするために、また!importantを使ってコードを書くことになります。そうすると、どのスタイルが最終的に適用されているのか分かりにくくなります。また記述量が増えるので、コードが読みづらくなります。そのため、!important頼りでコードを書くのはあまり良くないと考えます。
!importantを使う代わりに、詳細度を理解して簡潔なコードを書くことが望ましいです。
まとめ
CSSの優先度は、おおまかには以下のようになります。
- あとに記述したものが優先される
- セレクタの種類によって詳細度が決まっている
- !importantで指定したものは最優先になる
参考サイト
