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

IDセレクタとインラインスタイル

IDセレクタとインラインスタイルの優先順序のサンプルです。
7行目は、IDセレクタで13行目の背景色を指定しています。
13行目は、インラインスタイル(P要素のstyle属性)で背景色を指定しています。
インラインスタイルの方が詳細度が大きいので13行目で指定した色が表示されます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>CSSのサンプル</title>
<style>
#t1{ 
  background-color:SkyBlue;
}
</style>
</head>
<body >
<p id="t1" style="background-color:Orange;">テスト1</p>
</body>
</html>

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

テスト1

!importantのサンプル

!importantの優先順序のサンプルです。
8行目は、クラスセレクタで13行目の背景色の指定を!important付きでしています。
13行目は、インラインスタイル(P要素のstyle属性)で背景色を指定しています。
結果は、!importantの指定が優先されて8行目の色が適用されます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>CSSのサンプル</title>
<style>
.t2{ 
  background-color:SkyBlue !important;
}
</style>
</head>
<body >
<p class="t2" style="background-color:Orange;">テスト2</p>
</body>
</html>

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

テスト2

ID セレクタとクラスセレクタとタイプセレクタ

ID セレクタとクラスセレクタとタイプセレクタ (要素型セレクタ)の優先順序のサンプルです。
7行目は、IDセレクタ(#t1)で22行目を指定しています。
11行目は、クラスセレクタ(.t2)で22行目を指定しています。
15行目は、タイプセレクタ (要素型セレクタ)(P)で22行目を指定しています。
結果は、この中で詳細度が一番大きい(より特定される)IDセレクタの色が適用されます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>CSSのサンプル</title>
<style>
#t1{ 
  color:blue;
  background-color:orange;
}
.t2{ 
  color:green;
  background-color:SkyBlue;
}
p{ 
  color:red;
  background-color:yellow;
}
</style>
</head>
<body >
<p id="t1" class="t2">テスト1</p>
</body>
</html>

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

関連の記事

CSSを記述する場所のサンプル
CSS スタイルの継承のサンプル(inherit)
カラーコードの一覧表(Webページの色)



△上に戻る