CSS優先順位
CSSの優先順位は以下で決まります。
- セレクタの種類・書き方
- 指定の順番
- スタイルシートの種類（ブラウザ側・ユーザー側・制作者側）
- !important指定
セレクタの種類・書き方について
セレクタの種類には、
- IDセレクタ
- classセレクタ
- 疑似classセレクタ、classセレクタ
- 要素セレクタ
- 疑似要素セレクタ
- 全称セレクタ
の5つがあり以下のような優先度になります。
IDセレクタ > classセレクタ = 疑似classセレクタ（hoverなど） > 要素セレクタ（pなど） = 疑似要素セレクタ（beforeとかafterなど）> 全称セレクタ（*）
セレクタには子孫セレクタの設定など、個別性が高いセレクタ程、優先度が高くなります。
| セレクタ | A | B | C | D | 優先度 |
|---|---|---|---|---|---|
| * | 0 | 0 | 0 | 0 | 0000 |
| p | 0 | 0 | 0 | 1 | 0001 |
| p strong | 0 | 0 | 0 | 2 | 0002 |
| p .section | 0 | 0 | 1 | 1 | 0011 |
| #content p .section | 0 | 1 | 1 | 1 | 0111 |
| div#content p .section | 0 | 1 | 1 | 1 | 0112 |
| スタイル属性（<p style=”width:100px”>～</p>など） | 1 | 0 | 0 | 0 | 1000 |
CSSの優先順位
セレクタの計算に基いて算出された優先度が同じ数値になった場合は、後ろに指定されたものが優先されます。
また、スタイルシートには、ブラウザ側・ユーザー側・制作者側の3種類があります。そして、それぞれの優先度は以下のとおりです。
- !important宣言付きのユーザースタイル
- !important宣言付きの制作者スタイル
- 制作者スタイル
- ユーザースタイル
- UA（ブラウザなど）のデフォルトスタイル
プロパティの値に、”!important”と指定することで指定したプロパティを最優先にすることができます。
div.section {
color: #f00 !important;
}
子孫セレクタで個別性の高い指定例えば #localPage #pageBody #pageTop #contentsWrap #contents h3 といったセレクタの指定をするとむやみにクラスやIDを指定しなくて済みます。けれども優先度の問題で思わぬところでCSSの設定が思い通りにいかなくなるケースがみられます。子孫セレクタでIDが複数含まれたセレクタが優先度が高く単一のclassで指定したはずのセレクタが負けてしまうケースなどです。どうやってもあるセレクタにCSSが効かない時など大体優先順位で負けているからだと思うと良いかもしれません。
