CSS詳細度(specificity)とは？計算方法と優先順位の仕組みを解説

CSSでスタイルを当てるとき、異なるセレクタから同じプロパティが設定されていた場合、どのスタイルが優先されるかを決めるルールが詳細度（specificity）です。ルールが複雑になるほど、どのように数値化されるかが分からず混乱しやすいですが、本記事では最新情報をもとに具体例を多数交えて「CSS 詳細度 specificity 計算」をしっかり理解できるように解説します。

CSS 詳細度 specificity 計算の基本原則と構成要素

CSS 詳細度 specificity 計算を理解するためには、その仕組みがどのような構造で成り立っているかを押さえることが不可欠です。基本的な構成要素を整理したうえで、最新の仕様で追加・例外となるケースについても確認します。詳細度は数値として比較可能な形式で表され、複数の要素から構成されます。

IDセレクタ、クラス、属性、要素など主要なセレクタの種類

IDセレクタは最も強力な特殊性を持ち、次いでクラス、属性、疑似クラス、最後に要素名・疑似要素の順で詳細度が低くなります。idセレクタ「#header」があれば、他の多くのクラスや要素よりも優先される可能性があります。属性セレクタ（例 [type=”text”]）や疑似クラス（例 :hover）もクラス系として一括して扱われます。

要素名セレクタ（例 div、h1）および疑似要素（例 ::before、::after）は詳細度の最も下の階層で、クラス系よりも低い優先度になります。ユニバーサルセレクタ（＊）は詳細度に寄与しません。

詳細度のスコア表現と計算方法

詳細度は一般的には三つまたは四つの項目で表されます。最新仕様では、「インラインスタイル」「IDの数」「クラス／属性／疑似クラスの数」「要素／疑似要素の数」の四要素形式が標準です。各項目に数値を数えて、これらを順に比較して優先順位を決定します。

具体的には、インラインスタイルを適用すると最も高い階層となり、それ以外のルールより優先されます。IDセレクタは次点、クラス・属性・疑似クラスは中間、要素・疑似要素は最も低い階層です。これらの数が多くても、IDが１つあればクラスを多数含むルールよりも優先されます。

:not(), :is(), :where()などの擬似クラスの影響

:not()や:is()、:where()のような擬似クラスについては、仕様が進化しており最新仕様ではそれぞれが詳細度の計算に与える影響が異なります。たとえば :where() はその中のセレクタが何であっても詳細度に全く影響を与えません。つまり、:where(.foo) は詳細度を一切増やさない擬似クラスです。

一方で :is() や :not() の中に含まれるセレクタは、その内容に応じてクラス・属性・疑似クラス・要素とみなされ、これらが詳細度の計算に加えられます。仕様変更でこれらの挙動が明確化されており、最新のブラウザではこのルールに沿った挙動が実装されています。

CSS 詳細度 specificity 計算のステップとポイント

ここでは具体的に「どのように計算を行うか」の手順を確認します。各ステップでどのセレクタがどの項目に数えられるか、例を交えて丁寧に解説します。計算方法を知ることで、スタイルが期待通りに適用されない原因を自分で診断できるようになります。

ステップ1：インラインスタイルの確認

最初に確認すべきはそのプロパティがインラインスタイル（style属性）で設定されていないかどうかです。インラインスタイルがある場合にはそれが最高級の詳細度を持ち、別の外部スタイルシートのIDやクラスよりも常に優先されます。例外として !important を使った外部ルールがあれば、場合によってはこの限りではありません。

インラインスタイルが設定されていない場合には次のステップに移ります。この段階でインラインスタイルがあれば、具体的な計算を行う必要はありません。インラインスタイルは詳細度の最初の項目で特別扱いされるためです。

ステップ2：IDセレクタの数を数える

次にするのはセレクタ中に含まれるIDセレクタの数を数えることです。例えば「#nav .item #logo」というセレクタでは、IDセレクタは #nav と #logo の2つが含まれており、この項目の値は2になります。他のクラスや要素の数に関係なく、IDの数が多い方が優先されるケースが多いです。

IDセレクタは唯一の強い階層なので、IDの数が異なれば他の項目を比較する必要はありません。ID数が等しいときにクラス系と要素系の項目で比較します。

ステップ3：クラス、属性、疑似クラスの数を計測する

IDの項目が決まったら、次はクラス（classセレクタ）、属性セレクタ、および疑似クラス（例 :hover, :focus など）の数を合計します。これらはすべて同じ階層で扱われ、詳細度の中で中間的な役割を持ちます。数が多ければより詳細度が高くなります。

例として「.btn.primary:hover [type=”button”]」のような構成なら、クラス .btn、.primary の２つ、疑似クラス :hover の１つ、属性 [type=”button”] の１つがあり、この項目の合計は4になります。

ステップ4：要素名と疑似要素の数を加える

最後にセレクタ中の要素名（例 div, p, span など）および疑似要素（例 ::before, ::afterなど）の数を数えます。この項目は最も低い階層であり、他の項目がすべて等しい場合にのみ優先比較に使われます。要素セレクタが非常に多くても、IDやクラス系の差を埋めることはできません。

要素セレクタの数は単純にそのセレクタ中に現れる要素名の数で決まります。疑似要素も同じ項目で扱われます。例「div.header p::after」において要素名は div と p で2、疑似要素 ::after で1の合計が3になります。

CSS 詳細度 specificity 計算における優先順位のルールと例外

計算方法を理解したうえで、どのような優先順位ルールが働くのか、また例外となるケースを確認します。これを知ることで、意図しないスタイルの上書きや思わぬCSSの無効化を防げます。最新仕様を踏まえた挙動を中心に説明します。

プロパティの競合時にどのルールが勝つか

複数のセレクタが同じ要素に同じCSSプロパティを指定している場合、詳細度の計算結果に基づいて最も高いものが勝ちます。ID数、クラス系数、要素系数の順で比較して決定され、すべて等しいなら最後に書かれたルールが適用されます。これはスタイルシートの記述順が重要になる場面です。

また、同じスタイルシート内だけでなく異なるスタイルシートからのルールやインラインスタイル、さらにはユーザーエージェントスタイルもこの計算に関与しますが、優先度の比較は同じ階層の中で行われます。階層が異なればそもそも比較されません。

!importantの扱いとその制約

!important をプロパティ値に指定すると、その宣言は通常の詳細度やソース順序を超えて優先されます。通常のルールでは詳細度の高いものが勝ちますが、!important 宣言があればそれが優先されます。ただし、!important 同士で競合する場合には、それぞれの詳細度を比較し、その後コード中に後から現れたものが勝ちます。

ただし、過度に !important を使用すると保守性が低下するため、最新のCSS設計ではできるだけ使わない方向が推奨されています。代替として階層やレイヤー構造、クラス命名規則を工夫する手法が主流です。

@scope やレイヤー、疑似クラス新仕様がもたらす影響

最近のCSS仕様で追加された @scope ルールや、cascade layers、:where() のような擬似クラスなどは、詳細度とスタイル優先順位の調整に新たな選択肢を提供しています。たとえば @scope によるスタイルのスコープ化は詳細度を直接増やすわけではありませんが、影響を与える範囲を制限できます。

:where() はその中のセレクタが何であっても詳細度を増やさないという特異性を持っており、複雑なセレクタ構造を作る際にも柔軟に優先度を調整できるようになっています。これにより従来の特定セレクタとの競合を避けやすくなっています。

CSS 詳細度 specificity 計算 活用の実践テクニック

理解だけでなく、実際のWeb制作で詳細度を活かすテクニックをいくつか紹介します。自分のプロジェクトでスタイルが思い通りに反映されないとき、これらを使って原因を探し、改善することができます。

最小限の詳細度でのセレクタ設計のコツ

セレクタはなるべくシンプル、かつ必要最低限の詳細度に抑えるよう設計することが望ましいです。具体的には、IDセレクタの乱用を避け、クラスベースでモジュール化・再利用しやすいスタイルを書くことが推奨されます。要素名セレクタや疑似要素を使うのは、クラス系の数が同じか低い場合に限ります。

また、:.where() をうまく使ってセレクタの見た目複雑さを保ちつつ優先度を下げるテクニックも有効です。モダンなCSS設計ではこうした手法が広く受け入れられています。

詳細度競合のデバッグ方法

スタイルが効かない・思ったものと違うスタイルが適用されるとき、まずブラウザの開発者ツールでどのセレクタが適用されているか確認することが基本です。その上で、詳細度スコアを計算し、競合している他のルールと比較します。IDの有無・クラスの数・要素名の数を見るだけで原因の多くは分かります。

また、!important が使われているかどうか、あるいは cascade layers や style 属性など異なる階層からのスタイルが影響していないかを確認することも重要です。これらは詳細度計算以外の要因で優先順位に影響するためです。

実例で比べてみるセレクタ具体例

CSS 詳細度 specificity 計算の最新仕様での変更点やよくある誤解

CSS の進化により、詳細度に関する仕様も微調整や例外が加わっています。ここでは最新仕様で重要になったポイントと、一般的に誤解されやすい内容について整理します。これらを押さえることで、意図しない動作を避け、設計にミスが生じにくくなります。

:where() の特異性が0である理由

:where() は内部のセレクタがどれだけ複雑であっても、呼び出し元の詳細度を増やさない特殊な擬似クラスです。選択の柔軟性を確保しつつ、優先度の競合を避けるために設計された仕様です。この動作は最新仕様に明示されており、現行のブラウザで共通してサポートされています。

複雑な擬似クラスや構造セレクタ（:is, :not, :has など）の詳細度の取り扱い

:is() や :not()、あるいは :has() のような構造セレクタは、内部の引数に含まれるセレクタ部分が詳細度の計算対象です。つまり :not(.foo) の中の .foo はクラス系としてカウントされます。これにより、構造を整理した上でどの部分が詳細度に影響するかを把握して選ぶ必要があります。

詳細度と記述順（ソース順）の関係とCascadeの階層

詳細度が同じルールが複数ある場合、ソースコード上で後に書かれたものが優先されます。これはスタイルシート内部でも外部でも同様です。また、異なる起源（ユーザー定義、ブラウザデフォルト、ユーザーエージェントスタイルなど）や異なるレイヤーにあるスタイルは、詳細度の比較より前に階層構造の規則によって優先度が決まる場合があります。

詳細度スコア計算に関する誤解と避けるべきPitfall

よくある誤解として、「多くのクラスがあればIDを超える」と思われがちですが、ID 1 はクラス10個よりも常に優先されます。詳細度の各項目は別々に比較され、合計ポイントで “巻き上げ” するような動作はありません。

またユニバーサルセレクタ（＊）や継承されるプロパティ（親要素からの継承）も詳細度の計算には入りません。これらを含めてしまうと誤った理解につながるため、仕様を正しく把握しておくことが重要です。

CSS 詳細度 specificity 計算の学習がもたらすメリットと注意点

詳細度の仕組みを理解することで、CSS設計の質が向上し、メンテナンスしやすく拡張性のあるコードを書くことが可能になります。しかしその反面、複雑なセレクタを多用するとスタイルの予測が難しくなり、不具合の原因になることもあります。

可読性と保守性を高める設計方針

クラス命名規則を統一し、IDの使用を限定することで詳細度の乱用を防げます。また、スタイルの優先順位が直感的に理解できるように、構造化されたスタイルシート設計や共通化を図ることが大切です。

パフォーマンスへの影響

非常に複雑なセレクタや頻繁に評価されるセレクタ（子孫セレクタなど）はブラウザの処理に影響する可能性があります。詳細度を上げるためだけの過度なセレクタは避け、必要なスタイルのみをターゲットするように設計しましょう。

フレームワークやライブラリでの扱い

モダンなCSSフレームワークやコンポーネントライブラリでは、詳細度をあえて低く保つ設計が採用されることが増えています。Scoped CSS や CSS-in-JS の利用により、セレクタごとに過度な競合を起こさない仕組みが組み込まれているため、利用時にはフレームワークのスタイルルールを確認することが重要です。

まとめ

CSS 詳細度 specificity 計算は、スタイルの競合を解決するためのルールであり、インラインスタイル、ID、クラス系、要素系の四階層から成ります。最新仕様では :where() の特異性が 0 であることや :is()/ :not()/ :has() の中身が詳細度に影響するなど、例外や仕様の明確化が進んでいます。

スタイルが思った通りに適用されない原因を探すには、まず詳細度の計算を自分でしてみることが有効です。そのうえで設計をシンプルに保ち、!important の乱用を避け、クラスベースのモジュール化を心がけることで、保守性が高く予測可能な CSS を書けるようになります。