CSS セレクタの優先順位

CSSのセレクタの優先順位についてです。

目次

優先順位 CSSのセレクタの優先順位
  同じセレクタで後勝ちになる場合
  IDセレクタとインラインスタイルがある場合
  !importantがある場合
  IDセレクタ、クラスセレクタ、要素型セクレタがある場合

CSSのセレクタの優先順位

CSSのセレクタには、詳細度と呼ばれる点数があります。

セレクタの詳細度の大きい(より特定される)ものが優先されます。

以下はセレクタの詳細度を大→小に並べたものです。

1000 インラインスタイル
100 IDセレクタ
10 クラスセレクタ
10 属性セレクタ
10 擬似クラス
1 タイプセレクタ (要素型セレクタ)
1 疑似要素
0 全称セレクタ(ユニバーサルセレクタ,アスタリスク*)

詳細度が等しい場合は、 CSSで後に記述されたものが適用されます(後勝ち)。

CSSを記述する場所のサンプルは以下の3つあります。
1.link要素で外部のCSSファイルを指定
2.style要素を作成しその中にCSSを記述
3.htmlの要素の中にstyle属性を追加しそこにCSSを記述(=インラインスタイル)

!importantをつけると上記の優先度を無視して!importantがある箇所の優先度が一番強くなります。

以下は、MDNの詳細度の概念のリンクです。
https://developer.mozilla.org/ja/docs/Web/CSS/Specificity

同じセレクタで後勝ちになる場合

同じセレクタで後勝ちになる場合のサンプルです。

<style>
#p1 {
  background-color: red;
}
#p1 {
  background-color: blue;
}
</style>

<p id="p1">テスト1</p>

2行目と5行目は、同じセレクタです。
10行目は、5行目が後勝ちになるので背景色は青になります。

IDセレクタとインラインスタイルがある場合

IDセレクタとインラインスタイルがある場合のサンプルです。

<style>
#t1{ 
  background-color:SkyBlue;
}
</style>

<p id="t1" style="background-color:Orange;">テスト1</p>

2行目は、IDセレクタで7行目の背景色を指定しています。
7行目は、インラインスタイル(P要素のstyle属性)で背景色を指定しています。
インラインスタイルの方が詳細度が大きい(より特定される)ので7行目で指定した色が表示されます。

!importantがある場合

!importantがある場合のサンプルです。

<style>
.t2{ 
  background-color:SkyBlue !important;
}
</style>

<p class="t2" style="background-color:Orange;">テスト2</p>

2行目は、クラスセレクタで7行目の背景色を指定しています。!importantがあります。
7行目は、インラインスタイル(P要素のstyle属性)で背景色を指定しています。
本来であれば7行目のインラインスタイルが優先されますが、2行目に!importantの指定があるので2行目の色が適用されます。

IDセレクタ、クラスセレクタ、要素型セクレタがある場合

詳細度の大きいセレクタが選ばれるサンプルです。

<style>
#t1{ 
  color:blue;
  background-color:orange;
}
.t2{ 
  color:green;
  background-color:SkyBlue;
}
p{ 
  color:red;
  background-color:yellow;
}
</style>

<p id="t1" class="t2">テスト1</p>

2行目は、IDセレクタ(#t1)で16行目を指定しています。
6行目は、クラスセレクタ(.t2)で16行目を指定しています。
10行目は、タイプセレクタ (要素型セレクタ)(P)で16行目を指定しています。
結果は、この中で詳細度が一番大きい(より特定される)IDセレクタの色が適用されます。

関連の記事

CSSの書き方/コメントとセレクタの一覧
CSSを記述する場所のサンプル
CSS スタイルの継承のサンプル(inherit)
CSS ボックスモデルの構造
CSS pxとemとremの違い(長さの単位)

△上に戻る