CSSの基礎知識

スタイルの優先順位

HTML文書に適用されるCSSのスタイルは、その指定方法や記述する順序によって優先度が異なります。

組み込まれるスタイルの優先順位

CSSは「Cascading Style Sheets」という名前の通り段階的（Cascading）に適用され、「あとに組み込まれた宣言ほど優先順位が高くなる」というルールが基本になります。

ブラウザーの既定のスタイルよりも閲覧者がブラウザーに設定したユーザースタイル、さらに制作者が設定したスタイルが優先されます。また、HTML文書に組み込んだ外部スタイルシートよりもstyle要素内での宣言のほうが優先され、さらにstyle属性による宣言がもっとも優先されます。

記述の順序の優先順位

記述の順序についても同様です。以下の例では、p要素に対して2つのスタイルを指定していますが、適用されるのは後ろに記述したスタイルとなります。

HTML 
<head>
<style type="text/css">
  p {color: red; }
  p {color: blue; }
</style>
</head>

個別性の優先順位

スタイルには「個別性」という基準も設けられています。style属性の有無や、セレクタ内のid属性、その他の属性、疑似クラス、要素、疑似要素の数によって以下のような計算がなされ、記述の順序に関係なくスタイルが優先して適用されます。

スタイルの指定 得点の計算
要素にstyle属性が指定されている 1,000点が計算される
セレクタにid属性が含まれる id属性1つにつき100点が計算される
セレクタにid属性以外の属性と疑似クラスが含まれる 属性、疑似クラス1つにつき10点が計算される
セレクタに要素、疑似要素が含まれる 要素、疑似要素1つにつき1点が計算される

!important宣言

スタイルの区切りを表すカンマ（;）の後ろに「!important」を追記すると、そのスタイルは最優先で指定されます。

HTML 
<style type="text/css">
  p {color: red; !important }
  p {color: blue; }
</style>

関連記事