CSS セレクタの優先順位(!important)

01. セレクタの優先順位

・CSSのセレクタの優先順位とは

02. 使用例

・同じセレクタの場合は後勝ちになる

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

・!importantがある場合

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

CSSのセレクタの優先順位とは

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

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

名称	例	点数	優先度
全称セレクタ	*	0	小
疑似要素	::before	1
タイプセレクタ (要素型セレクタ)	p	1
擬似クラス	:link	10
属性セレクタ	[type="text"]	10
クラスセレクタ	.p1	10
IDセレクタ	#p1	100
インラインスタイル	style="...";	1000	大

詳細度が等しい場合は、 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行目は、同じセレクタです。
5行目が後勝ちになるので背景色は青になります。

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

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

インラインスタイルの方が詳細度が大きい(より特定される)のでオレンジが表示されます。

!importantがある場合

<style>
  .t2 {
    background-color: SkyBlue !important;
  }
</style>
<p class="t2" style="background-color: Orange">テスト2</p>

2行目は、!importantがあります。
本来であれば6行目のインラインスタイルが優先されますが、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)です。
6行目は、クラスセレクタ(.t2)です。
10行目は、タイプセレクタ (要素型セレクタ)(P)です。
この中で詳細度が一番大きい(より特定される)IDセレクタの色が適用されます。