HTML実践学習18 スタイル優先度

CSSに複数のスタイルが同じ箇所にある場合何が優先されるのかを説明していきます。

スタイルの優先度

セレクタにはそれぞれ点数が付いており、高い点数のセレクタで記述されているスタイルが優先されます。点数まで考えると複雑になりますので、下記の基本的なルールを覚えておきましょう。

（1）後に書かれたスタイルが優先

1つのソース内に同じ要素に対して2つ以上のスタイルの記述がある場合は、ソースの一番下にあるスタイルが優先されます。下記の場合は背景色が赤になります。

p {
  background: blue;
  background: red;
}

（2）idセレクタ＞classセレクタ＞タイプセレクタ

一つの要素に対して「idセレクタ」「classセレクタ」「タイプセレクタ」のスタイルの記述がある場合は、「idセレクタ＞classセレクタ＞タイプセレクタ」の優先度となります。下記の場合は背景色は黄色になります。（classとidはhtml上でp要素に指定しているとする）

.classselect {
  background: blue;
}

p {
  background: red;
}

#idselect {
  background: yellow;
}

（3）全称セレクタ

全称セレクタ（*アスタリスク）で全要素に対してスタイルを記述する場合は、何よりも優先度が低くなります。

（4）インラインスタイルシート

html内のタグにスタイルを直書きしたインラインCSSは、セレクタで指定したスタイルよりも優先されます。

（5）!important宣言

!important宣言をしたファイルは何よりも優先されます。下記の場合は赤色の背景になります。

.classselect {
  background: blue;
}

p {
  background: red !important;
}

まとめると優先度は下記のようになります。（上から優先度が高い順）

!important宣言
インラインスタイルシート
idセレクタ
classセレクタ
タイプセレクタ
全称セレクタ

ただし「!important宣言」は、なるべく多用しないようにしましょう。「!important宣言」がサイトに多く存在してしまうと、メンテナンスが困難になってしまうためです。
この他にも「擬似クラス」や「擬似要素」に指定した場合の優先度や、親要素との組み合わせでも点数が変わります。少しづつ覚えていきましょう。

POINT

スタイルの優先度はセレクタの種類や記述方法によって変わります。