CSSには様々な指定方法があり、この指定方法によって優先順が決められています。例えば、同じP要素に対してセレクタを下記のように指定したとします。
01 | 同じP要素に同じclassセレクタの指定が競合した場合 |
10 | <p class="style">同じclassセレクタなので後ろに書かれたスタイルが優先され、文字色は黒（#000000）になります。</p> |
01 | 同じP要素にclassセレクタとIDセレクタの指定が競合した場合 |
10 | <p id="style" class="style">classセレクタが後ろに記述されていますが、IDセレクタの方が優先度が高いため文字色は赤（#ff0000）になります。</p> |
このように後ろに指定されたものが優先されるというだけではなく、スタイルセレクタの種類によっても優先順位に影響を与えます。
優先順位に影響を与えるもの
スタイルシートの優先順位に影響を与えるものは以下の4つです。
- セレクタの種類・書き方
- 指定の順序
- スタイルシートの種類（ブラウザ側・ユーザー側・制作者側）
- !important指定
セレクタの種類・書き方について
セレクタの種類には、
- IDセレクタ
- classセレクタ
- 疑似classセレクタ
- 要素セレクタ
- 疑似要素セレクタ
- 全称セレクタ
の5つがあり、IDセレクタ > classセレクタ = 疑似classセレクタ > 要素セレクタ = 疑似要素セレクタ > 全称セレクタと、このような優先度になっています。
計算方法
セレクタの優先度は次ように算出されています。優先度の数値が高いほど優先されます。
| セレクタ |
A |
B |
C |
D |
優先度 |
| * |
0 |
0 |
0 |
0 |
0000 |
| p |
0 |
0 |
0 |
1 |
0001 |
| p span |
0 |
0 |
0 |
2 |
0002 |
| p .bold |
0 |
0 |
1 |
1 |
0011 |
| #main p .bold |
0 |
1 |
1 |
1 |
0111 |
| div#main p .bold |
0 |
1 |
1 |
1 |
0112 |
| スタイル属性（<p style=”bold”>～</p>など） |
1 |
0 |
0 |
0 |
1000 |
- A.HTMLにstyle=””で指定
- B.IDセレクタの数
- C.classセレクタ・擬似classセレクタの数
- D.要素セレクタ・疑似要素の数
指定の順序について
セレクタの計算に基いて算出された優先度が同じ数値になった場合は、後ろに指定されたものが優先されます。
スタイルシートの種類（ブラウザ側・ユーザー側・制作者側）について
スタイルシートには、ブラウザ側・ユーザー側・制作者側の3種類があります。そして、それぞれに優先度が設定されており、制作者側 > ユーザー側 > ブラウザ側となっています。
!important指定について
スタイルプロパティに、”!important”と指定することで指定したプロパティを最優先にすることができます。
01 | 同じP要素にclassセレクタとIDセレクタの指定が競合した場合に加え、classセレクタのプロパティに"!important"が指定されている |
07 | color: #000000 !important; |
10 | <p id="style" class="style">セレクタの優先度算出ルールに基づくと#styleのプロパティが優先されるはずですが、.styleのプロパティに"!important"を指定しているため、文字色は黒（#000000）になります。</p> |
このようにスタイルの優先度は様々な要素が絡み合って算出されているため、単純にスタイルを記述していくだけでは「何故かスタイルが適用されない」という問題に陥ってしまいがちです。
優先度を算出方法を良く理解し、無駄な時間がかからないようにしたいですね。
