Specificity Engine — Prototype v1

CSS沼レスキュー なぜそのCSSは効かないのか、詳細度エンジンで診断する

CSSと対象要素、確認したいプロパティを入力すると、競合するルールを洗い出して詳細度・!important・記述順から「なぜそのルールが勝っているか」を判定します。

貼り付けたCSSの範囲内での判定です。外部ファイルやインラインstyle属性、ブラウザ拡張機能などの影響は考慮されません。

既知の制限

💡 「効かないCSS」が起きる仕組みと診断の考え方

■ 詳細度が同じ場合は「後に書かれた方」が勝つ

詳細度(a, b, c)が完全に同じ2つのルールが同じ要素・同じプロパティを指定している場合、詳細度では優劣がつきません。このときブラウザは「CSSファイル内、あるいは複数ファイルの読み込み順の中で、より後に登場したルール」を採用します(後勝ちの原則)。本ツールの診断結果でも、この記述順を「順位」の判定材料として表示しています。

■ !important の影響範囲

!important を付けた宣言は、詳細度の計算結果に関係なく最優先で適用されます。ただし !important 同士が競合した場合は、通常のCSS同様に詳細度、それでも決まらなければ記述順で決着します。多用すると後からの上書きが困難になるため、局所的な緊急回避策として使うのが基本です。

■ よくある質問 (FAQ)

Q. インラインの style="" 属性はどのくらい強いのですか?
style="" 属性は、通常の詳細度計算(ID・クラス・要素セレクタ)よりも常に優先されます。唯一これに勝てるのは !important を付けたCSSルールのみです。
Q. 詳細度を都度計算しなくても済む書き方はありますか?
クラスセレクタ中心(BEM等の命名規則)でCSSを統一し、IDセレクタでのスタイリングやネストの深いセレクタを避けることで、詳細度の競合自体が発生しにくくなります。