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

目次

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セレクタの色が適用されます。

関連の記事

CSS ボックスモデルの構造
CSS pxとemとremの違い(長さの単位)

△上に戻る