CSSを適用する優先順序のサンプル

CSSを適用する優先順序のサンプルです。

目次

CSSの適用の優先順序

  • セレクタの詳細度の大きい(より特定される)ものが優先されます。以下はセレクタの詳細度を小→大に並べたものです。
    ・全称セレクタ(ユニバーサルセレクタ,アスタリスク*) 
    ・タイプセレクタ (要素型セレクタ)
    ・クラスセレクタ
    ・属性セレクタ
    ・擬似クラス
    ・ID セレクタ
    ・インラインスタイル
  • 詳細度が等しい場合は、 CSSで発見される最も後ろのものが適用されます。
  • CSSを記述する場所は以下の3つあります。1→2→3と後の宣言になります。
    1.link要素で外部のCSSファイルを指定
    2.style要素を作成しその中にCSSを記述
    3.htmlの要素の中にstyle属性を追加しそこにCSSを記述(=インラインスタイル)
  • !importantをつけると上記の優先度を無視して!importantがある箇所の優先度が一番強くなります。
  • 以下は、MDNの詳細度の概念のリンクです。
    https://developer.mozilla.org/ja/docs/Web/CSS/Specificity

記述する場所でセレクタが選ばれるサンプル

記述する場所でセレクタが選ばれるサンプルです。

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

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

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

上記コードの実行結果です。

テスト1

!importantのサンプル

!importantのサンプルです。

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

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

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

上記コードの実行結果です。

テスト2

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

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

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

上記コードの実行結果です。

関連の記事

CSSの書き方とセレクタの一覧
CSSを記述する場所のサンプル
CSS スタイルの継承のサンプル(inherit)
CSS ボックスモデルについて
CSS 長さの単位(px,em,rem)のサンプル

△上に戻る