はじめに
CSSを使ってウェブサイトをデザインする際には、同じ要素に対して複数のスタイルルールが適用されることがよくあります。しかし、どのルールが優先され、最終的に適用されるのでしょうか？ その答えは「詳細度（Specificity）」にあります。今回はこの詳細度について、その種類と優先順位、適用順序の原則、そして具体的な例を通じて解説します。
詳細度とは何か？
詳細度は、CSSのセレクタがどれだけ「具体的」で「特定の」要素を指しているかを表す数値です。高い詳細度を持つスタイルルールは、低い詳細度のスタイルルールよりも優先されます。
詳細度の種類と優先順位
以下に、詳細度の種類とそれらの優先順位を示します。
- インラインスタイル（Inline Styles）: インラインスタイルは、要素に直接適用されるスタイルです。これが最も詳細度が高いとされています。
<p style="color: red;">This is an inline style.</p>
- IDセレクタ（ID Selectors）: IDセレクタは、HTML要素のID属性を対象にします。詳細度はインラインスタイルに次いで高いです。
#myID {
color: blue;
}
- クラスセレクタ、属性セレクタ、擬似クラス（Class Selectors, Attribute Selectors, Pseudo-classes）: これらのセレクタは詳細度がIDセレクタよりも低いです。
.myClass {
color: green;
}
[data-attr="value"] {
color: purple;
}
a:hover {
color: orange;
}
- 要素セレクタ（Element Selectors）: 要素セレクタは、すべての要素（p, div, aなど）に対して適用されます。これが最も詳細度が低いとされています。
p {
color: yellow;
}
詳細度の比較と適用順序の原則
上述の詳細度の優先順位を頭に入れておくと、スタイルの適用順序を理解するのが簡単になります。
- 詳細度が高いルールが優先される:
複数のルールが同一要素に対して適用された場合、詳細度が最も高いルールが優先されます。
- 詳細度が同じ場合、後から書かれたルールが適用される:
同じ詳細度を持つルールがある場合、スタイルシート内で後に記述されたルールが優先されます。
実例による詳細度の理解
以下に具体的な例を挙げて詳細度の理解を深めます。
実例1: クラスセレクタ vs. IDセレクタ
<p id="myID" class="myClass">Hello, world!</p>
<style>
.myClass {
color: green;
}
#myID {
color: blue;
}
</style>
上記の例では、<p>タグがmyClassというクラスとmyIDというIDを持っています。クラスセレクタよりIDセレクタの詳細度が高いため、テキストの色は青色になります。
実例2: スタイルルールの順序による適用優先度の変化
<p class="myClass">Hello, world!</p>
<style>
.myClass {
color: green;
}
.myClass {
color: blue;
}
</style>
この例では、myClassクラスが二度定義されています。詳細度は同じですが、後に定義されたcolor: blue;が適用されるため、テキストの色は青色になります。
さいごに
CSSの詳細度は、複数のスタイルルールが同一要素に適用された場合の優先順位を決める重要な概念です。詳細度の原則を理解しておけば、予期せぬスタイリングの問題を避けることができます。初めて学ぶときは少し複雑に感じるかもしれませんが、具体的な例を通じて練習し、理解を深めていきましょう。