CSSの優先順位



優先順位について

CSSにおける定義の競合がある場合の、適用優先順位を記述します。


スタイルシートの優先順位

スタイルシートには制作者による定義が複数種類あります。

これら設定を合わせた上で、画面の描写が行われます。



セレクタの優先順位

セレクタの優先順位は以下の通りです。


優先順(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%;
}


関連

CSS





スポンサード リンク