【HTML・CSS】スタイルの詳細度について

2019年4月30日

CSSでは、対象要素に対してスタイルを設定します。
例としては、h1｛~｝、#id名{~}、.クラス名{~}といったような形で記述されます。

では、スタイルが競合した場合はどうなるでしょうか。
以下はh1要素に付随してクラス名を定義しています。

h1要素、クラス名にスタイルを記述してみます。

<h1 class="test">テスト</h1>

h1要素の文字色を赤、「test」クラスの文字色を青に設定するスタイルを記述します。

/* クラス"test"の文字色を青 */
 .test{
     color:blue;
 }
/* h1要素の文字色を赤 */
 h1{
     color:red; 
 }

.testをクラスセレクタ、h1をタイプセレクタと言います。スタイルの適用対象をセレクタと言います。

結果は以下の通りです。

文字色が青色です。したがって、.test{~}のスタイルが適用されたことが分かります。

なぜこのような現象が起きるのでしょうか。

原因は、スタイルの詳細度というものです。

要は優先順位です。

スタイルの詳細度

セレクタの優先順位は以下の通りとなります。

1. IDセレクタ（#id名）
2. クラスセレクタ（.クラス名） or 属性セレクタ（E［attr=value］）
3. タイプセレクタ（要素名）
4. ユニバーサルセレクタ（*）

id名はHTML内で唯一の名前として定義されます。
したがって、IDセレクタは最も高い優先順位となります。

限定的なものほど優先されるという認識でよいでしょう。

詳細度が同じスタイルは後から読み込んだものを優先

詳細度が同じスタイルについては、後から読み込んだスタイルが適用されます。
CSSファイルを外部からインポートした際も同様です。

例として、タイプセレクタ（要素名）が同じものについて、以下のように並列に記述します。
文字色を赤に設定する記述を先に、青に設定する記述を後に書いています。

<p>テスト</p>

/* 先に記述 */
p{
	color:red;
}
/* 後に記述 */
p{
	color:blue;
}

結果は以下の通りです。
文字色が青色であり、後に記述された方を適用していることが分かります。

終わりに

スタイルが適用されない等の問題は、既に記述しているスタイルと優先順位を比較してみると、原因が突き止めやすいです。