CSSセレクターの詳細度（Specificity）

スタイルが適用されるセレクターがどれだけ具体的に指定されているかを数値で表したものです。異なるセレクターを使用した複数のルールが同じ要素を選択する場合、詳細度が高いセレクターのスタイルが優先されます。

これは、CSSにおいてスタイルルールの優先順位を決定する重要な原則の一つです。

CSSセレクターの詳細度は「詳細度（Specificity）」とも呼ばれ、このルールを理解し適切に活用することで、ウェブページのスタイリングをより正確にコントロールすることができます。詳細度は、セレクターに含まれる要素・クラス・IDなどの組み合わせによって計算され、詳細度が高いほど優先順位も高くなります。この重要な概念をしっかりと理解し、適切に活用することで、ウェブ開発において効果的なスタイリングを実現できます。

CSSセレクターの役割と重要性

CSSセレクターの基本的な概念を理解することは非常に重要です。CSSセレクターは、ウェブページ上のHTML要素を選択してスタイルを適用する役割を担っており、ウェブページのデザインやレイアウトを制御するための必須ツールです。セレクターを使って目的の要素を正確に選択し、スタイルを適用できることが求められます。適切にセレクターを活用することで、保守性の向上やコードの再利用性を高めることができます。

セレクターを効率的に使用することで、ページのスタイリング作業をより効率的に行うことができ、ウェブサイトのパフォーマンス向上にも役立ちます。

CSSセレクターの詳細度（Specificity）とは？

CSSでスタイルを適用するためにHTML要素を選択する際、実際には異なるセレクターを使用した複数のルールが同じ要素を選択することがあります。
では、どのルールが優先されるかはどうやって判断すればよいのでしょうか？例を使って見てみましょう。

HTML 
<p id="my-id" class="a b">
    段落要素です
</p>
CSS 
* {
    color: red;
}
p {
    color: blue;
}
#my-id {
    color: green;
}
.a {
    color: olive;
}
.b {
    color: pink;
}
<p>要素にCSSが適用された様子 複数のセレクターが<p> 要素を選択してスタイルを適用しましたが、#my-idセレクターで指定された緑色（green）が適用されました。

この例は、複数のCSSセレクターを使って同じ要素を選択した場合にスタイルがどのように適用されるかを確認したものです。複数のCSSセレクターを使用しましたが、#my-idセレクターのスタイルが適用されました。なぜ#my-idセレクターのスタイルが適用されたのでしょうか？

#idセレクターのスタイルが適用された理由は、複数のCSSセレクターを使って同じ要素を選択した場合に優先的に適用されるCSSセレクターのルールがあるためです。では、どのようなルールがあるのか見ていきましょう。

どれだけ具体的（詳細度が高い）なCSSセレクターを使用するかが基準になります！

  • id属性はウェブ文書内で唯一の値を示す属性です。唯一の値とは非常に詳細度が高い値であると言えます。したがって、#idセレクターは非常に詳細度が高く要素を選択していると考えられます。
  • *セレクターはすべての要素を選択するセレクターです。すべての要素を選択するということは、詳細度が低いことを意味します。
  • .classセレクターは、class属性の値が一致したときに選択されるセレクターです。#idセレクターよりは詳細度が低いですが、*セレクターよりは詳細度が高いセレクターと言えます。

このようにCSSでは、「どれだけ詳細度の高いCSSセレクターを使うか」を基準として、複数のCSSセレクターで同じ要素を選択した場合に優先的に適用されるルールがあります。このルールはCSSセレクターの詳細度（Specificity）または「具体性」とも呼ばれます。

CSSセレクターの詳細度の値は、スタイルルールが適用される優先順位を決定する数値です。
詳細度の値は、セレクターに使用された要素、クラス、IDなどの組み合わせによって計算され、値が高いほど優先順位が高くなります。詳細度の値は、スタイルルールの競合時にどのルールが優先的に適用されるかを定義し、スタイリングをより正確に制御できるようにします。

CSSセレクターの詳細度のルール

  • 詳細度の値は「0,0,0,0」のように4つの部分値で表され、次のように計算されます。
  • セレクター内にあるすべての#idセレクターには、
  • セレクター内にあるすべての.classセレクター、疑似クラス（:first-child、:last-child、:focus、:active、:visited、:hover、::selectionなど）、その他の属性セレクターには、0,0,1,0の値が加算されます。
  • セレクター内にある要素名セレクターおよび疑似要素（::before、::after）セレクターには、0,0,0,1の値が加算されます。
  • すべての要素セレクター（*）は、値を持たず、詳細度にも一切影響を与えません。
  • :is()、:has()、および:not()は、それ自体には詳細度の値がなく、詳細度に影響を与えません。 （ただし、:is()、:has()、および:not()の内部に記述されたセレクターは詳細度に影響を与えます。）
  • :where()は、それ自体に詳細度の値がなく、詳細度に一切影響を与えません。内部に記述されたセレクターも詳細度には影響を与えません。
  • セレクターの階層や構造の組み合わせは、詳細度に一切影響を与えません。

CSSセレクターの詳細度の値の例

CSSセレクターの詳細度のルールに基づき、例を使ってCSSセレクターの詳細度の値を計算してみましょう。

CSS 
h2 {color: red;} /* 詳細度の値 = 0,0,0,1 */

p em {color: purple;} /* 詳細度の値 = 0,0,0,2 */

.grape {color: purple;} /* 詳細度の値 = 0,0,1,0 */

* .bright {color: yellow;} /* 詳細度の値 = 0,0,1,0 */

p.bright em.dark {color: maroon;} /* 詳細度の値 = 0,0,2,2 */

#id216 {color: blue;} /* 詳細度の値 = 0,1,0,0 */

p#addr [href] {color: gray;} /* 詳細度の値 = 0,1,1,1 */

では、詳細度とは何かを理解するために確認した例で、詳細度の値を適用してみましょう。

HTML 
<p id="my-id" class="a b">
    段落要素です
</p>
CSS 
* {  /* 詳細度の値 = 0,0,0,0 */
    color: red;
}
p {  /* 詳細度の値 = 0,0,0,1 */
    color: blue;
}
#my-id {  /* 詳細度の値 = 0,1,0,0 */
    color: green;
}
.a {  /* 詳細度の値 = 0,0,1,0 */
    color: olive;
}
.b {  /* 詳細度の値 = 0,0,1,0 */
    color: pink;
}
<p>要素にCSSが適用された状態 詳細度の値が最も大きい#idセレクターの値であるgreenが適用されました。

インラインスタイルの詳細度

これまで確認してきた詳細度の値は、0で始まるルールの値です。では、なぜ先頭に0が存在するのか疑問に思われたかもしれません。先頭の0は、style属性によるインラインスタイル選択がある場合に付与される値です。

セレクターでHTML要素を選択するのではなく、直接スタイルを指定するため、当然詳細度が最も高いという意味です。

HTML 
<h1 id="green-color" style="color:red;">idで選択された見出しです</h1> <!-- 詳細度の値 = 1,0,0,0 -->

!important宣言

CSSスタイルを指定する際、時々ある属性（Property）が非常に重要で他の属性よりも優先させる必要がある場合があります。このような場合、!importantを使用すると、詳細度のルールを無視して優先的に適用されます。

詳細度の値を適用した例に!importantを使用してみましょう。

HTML 
<p id="my-id" class="a b">
    段落要素です
</p>
CSS 
* {  /* 詳細度の値 = 0,0,0,0 */
    color: red;
}
p {  /* 詳細度の値 = 0,0,0,1 */
    color: blue;
}
#my-id {  /* 詳細度の値 = 0,1,0,0 */
    color: green;
}
.a {  /* 詳細度の値 = 0,0,1,0 */
    color: olive !important; /* !importantの使用 */
}
.b {  /* 詳細度の値 = 0,0,1,0 */
    color: pink;
}
<p>要素にCSSが適用された状態 詳細度のルールを無視して、!importantを使用した要素のセレクターのスタイルが適用されました。

一般的な宣言と!importantで指定された宣言は、それぞれ特別な詳細度を持ちませんが、別々に扱われます。実際には、!important宣言同士で詳細度が比較され、この表示のない一般的な宣言同士でも詳細度が比較されます。したがって、!important宣言と一般的な宣言が競合した場合、!important宣言が優先されます。

!important宣言はいつ使うべきか?

  • インラインスタイルを上書きする際に有効です。
  • 特に、JavaScriptでCSSをstyle属性として定義する場合はインラインスタイルとして適用されますが、このような場合にJavaScriptによるスタイルの変更を防ぐ際に有効です。
  • 詳細度の高いルールを無視して上書きしたい場合に有効です。

詳細度の値が同じ複数のセレクターが同一の要素を選択する場合

複数のCSSセレクターを使って同じ要素を選択した場合に適用される詳細度の値について確認しました。では、もし同じ要素を選択した複数のCSSセレクターの詳細度の値が同じだったらどうなるでしょうか？

この場合、後から定義されたセレクターのスタイルが適用されます。つまり、上書き（Override）されるということです。例で見てみましょう。

HTML 
<p class="a b">
    p段落要素です
</p>
CSS 
.a {  /* 詳細度の値 = 0,0,1,0 */
    color: olive;
}
.b {  /* 詳細度の値 = 0,0,1,0 */
    color: pink;
}
<p>要素にCSSが適用された状態 後からスタイルを定義したセレクターのスタイルが適用されます。これは上書き（Override）と呼ばれます。

この例でわかるように、後からスタイルを定義したセレクターのスタイルが適用されます。

同じセレクターの同じプロパティを複数回指定した場合

同じセレクターの同じプロパティを複数回指定した場合でも、後から指定したプロパティの値が適用されます。

HTML 
<p class="a b">
    p段落要素です
</p>
CSS 
.a {
    color: olive; /* 同じプロパティを複数回指定しました */
    color: red; /* 同じプロパティを複数回指定しました */
}
<p>要素にCSSが適用された状態 後からスタイルを定義したプロパティのスタイルが適用されます。これは上書き（Override）です。

!important宣言を同じ要素に複数回指定した場合

HTML 
<p class="a b">
    p段落要素です
</p>
CSS 
.a {  /* 詳細度の値 = 0,0,1,0 */
    color: olive !important;
}
.b {  /* 詳細度の値 = 0,0,1,0 */
    color: blue !important;
}
<p>要素にCSSが適用された状態 詳細度の値が同じ場合、後から!important宣言をしたセレクターのスタイルが適用されます。これは上書き（Override）と呼ばれます。

!important宣言が複数ある場合でも、上記の例と同様に詳細度の値が同じなら、後から宣言したセレクターのスタイルが適用されます。もちろん、同じセレクターに同じプロパティを複数回指定した場合も同じルールが適用されます。

注意すべき詳細度の落とし穴とミス

詳細度の値には、開発者がCSSスタイルの優先順位を理解し適用する際に注意すべき落とし穴やミスがあります。

  • #idセレクターの高い詳細度： #idセレクターは詳細度の値が非常に高いため、乱用すると他のセレクターと衝突しやすくなります。#idセレクターは固有の識別子として使用すべきであり、スタイリング目的でない場合は.classセレクターを使うことが推奨されます。
  • すべての要素セレクターの低い詳細度：すべての要素セレクターであるセレクターは詳細度の値を持ちません。そのため、*セレクターを多用すると他のセレクターと詳細度の競合が発生する可能性があります。できるだけ具体的なセレクターを使用してスタイルルールを定義することが望ましいです。
  • 不要な階層構造：セレクターの階層構造が複雑で入れ子になっている場合、詳細度の値が高くなります。不必要な階層構造は詳細度の競合を引き起こす可能性があり、スタイルルールの保守性や可読性を低下させることがあります。できるだけ簡潔で直接的なセレクターを使用し、詳細度の値を下げることが望ましいです。
  • インラインスタイルの優先順位：インラインスタイルは他のセレクターよりも詳細度の値が最も高いため、乱用すると他のスタイルルールを上書きしてしまう可能性があります。インラインスタイルは最小限に抑え、CSSファイルでスタイルを定義して一貫性と保守性を維持することが望ましいです。

これらの落とし穴やミスを避けるためには、詳細度の概念を理解し、セレクターを適切に使ってスタイルルールを作成することが重要です。詳細度の値を正しく理解し活用すれば、予期せぬスタイルの競合を防ぎ、ウェブページのスタイルの一貫性と保守性を向上させることができます。

セレクターの効率的な使用のためのパフォーマンス考慮事項

セレクターを効率的に使用するためにはパフォーマンスを考慮する必要があります。以下はセレクターの効率性とパフォーマンスを向上させるためのいくつかのポイントです。

  • 詳細度を下げる： 詳細度が高いセレクターよりも、詳細度が低いセレクターを使う方が一般的にパフォーマンス上の利点があります。要素や.class、#idセレクターを過剰に使うと、セレクターの複雑さやマッチング処理が増え、パフォーマンスが低下するため、控えることが推奨されます。
  • 最小限のセレクター使用：必要なスタイルを適用するために、最小限のセレクターを使用することが望ましいです。不必要な親子セレクターを使わず、直接的なセレクターを活用してスタイルルールを定義することがパフォーマンス向上に役立ちます。
  • すべての要素セレクター（*）の使用を減らす：ユニバーサルセレクターであるはすべての要素にマッチするため、マッチング処理が非効率になることがあります。可能な場合は具体的な要素名セレクターを使用して、ユニバーサルセレクターの使用を減らすことが望ましいです。
  • セレクターの範囲制限：セレクターの範囲を可能な限り制限することで、マッチング処理を最適化できます。特定の親要素内でのみスタイルを適用する場合は、その親要素を含むセレクターを使用することが望ましいです。
  • スタイルルールの数を減らす：ページに適用されるスタイルルールの数を最小限に抑えることもパフォーマンス向上に役立ちます。不必要なスタイルルールを削除し、可能な限り少ないスタイルルールを使用することでパフォーマンスを改善することが望ましいです。

これらのパフォーマンス上の考慮事項を念頭に置いてセレクターを使用すれば、ウェブページのスタイリング作業をより効率的に行うことができます。

仕様書

CSSセレクター詳細度に関する仕様書（スペック）
仕様書
CSSセレクターの詳細度（Specificity）値 Selectors Level 4
#specificity-rules

参考資料