CSSの優先順位
優先順位について
CSSにおける定義の競合がある場合の、適用優先順位を記述します。
スタイルシートの優先順位
スタイルシートには制作者による定義が複数種類あります。
これら設定を合わせた上で、画面の描写が行われます。
- 制作者スタイルシート
- 制作者が、自分のサイトをデザインする際に設定するスタイルシートです。他の2つのスタイルシートよりも優先されます。
- ユーザースタイルシート
- 閲覧者自身が見やすいようにUI（ブラウザなど）で設定したスタイルシート。
- デフォルトスタイルシート
- ブラウザに設定されているデフォルトのスタイルシートです。「制作者スタイルシート」や「ユーザースタイルシート」が設定されていない場合は、このデフォルトのスタイルシートが使用されます。
セレクタの優先順位
セレクタの優先順位は以下の通りです。
| 優先順(1が最大) | セレクタ種類 | 説明 |
|---|---|---|
| 1 | IDセレクタ | 1つの要素にだけスタイルを適用させる指定。 |
| 2 | クラスセレクタ | 分類に対してスタイルを適用させる指定。 |
| 3 | タイプセレクタ | 要素のタイプ別にスタイルを適用させる指定。 |
| 4 | 全称セレクタ | 全ての要素にスタイルを適用させる指定。 |
同一要素定義の優先順位
セレクタの優先度が同一の場合は、より後の方に記述されたスタイルの指定が優先されます。
p { color: red; }
p { color: blue; }
<p>文字は青色になります。</p>
優先順位の変更（!important）
「!important」を指定することで優先順位を入れ替えることが可能になります。
「!important」が指定されたスタイルが、最優先されることになります。
ただし、「!important」が認識されないブラウザが存在しますので注意が必要です。
#container {
min-height: 100%;
position: relative;
height: auto !important;
height: 100%;
width: 100%;
}