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

CSSでは、対象要素に対してスタイルを設定します。
例としては、h1{~}、#id名{~}、.クラス名{~}といったような形で記述されます。
では、スタイルが競合した場合はどうなるでしょうか。
以下はh1要素に付随してクラス名を定義しています。
h1要素、クラス名にスタイルを記述してみます。
<h1 class="test">テスト</h1>
h1要素の文字色を赤、「test」クラスの文字色を青に設定するスタイルを記述します。
/* クラス"test"の文字色を青 */
.test{
color:blue;
}
/* h1要素の文字色を赤 */
h1{
color:red;
}
.testをクラスセレクタ、h1をタイプセレクタと言います。スタイルの適用対象をセレクタと言います。
結果は以下の通りです。
文字色が青色です。したがって、.test{~}のスタイルが適用されたことが分かります。

なぜこのような現象が起きるのでしょうか。
原因は、スタイルの詳細度というものです。
要は優先順位です。
スタイルの詳細度
セレクタの優先順位は以下の通りとなります。
- IDセレクタ(#id名)
- クラスセレクタ(.クラス名) or 属性セレクタ(E[attr=value])
- タイプセレクタ(要素名)
- ユニバーサルセレクタ(*)
id名はHTML内で唯一の名前として定義されます。
したがって、IDセレクタは最も高い優先順位となります。
限定的なものほど優先されるという認識でよいでしょう。
詳細度が同じスタイルは後から読み込んだものを優先
詳細度が同じスタイルについては、後から読み込んだスタイルが適用されます。
CSSファイルを外部からインポートした際も同様です。
例として、タイプセレクタ(要素名)が同じものについて、以下のように並列に記述します。
文字色を赤に設定する記述を先に、青に設定する記述を後に書いています。
<p>テスト</p>
/* 先に記述 */
p{
color:red;
}
/* 後に記述 */
p{
color:blue;
}
結果は以下の通りです。
文字色が青色であり、後に記述された方を適用していることが分かります。

終わりに
スタイルが適用されない等の問題は、既に記述しているスタイルと優先順位を比較してみると、原因が突き止めやすいです。
ディスカッション
コメント一覧
まだ、コメントがありません