Specificity Visualizer — v3

詳細度ビジュアライザー 対象要素に効いている全プロパティを、まとめて解剖する

CSSと対象要素を入力するだけで、マッチする全ルールを検出し、プロパティごとの競合状況・最終的に勝つ値・その理由を一括で可視化します。

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

既知の制限

💡 CSS詳細度（Specificity）とカスケードの決定ルール

■ 3つの数値 (a, b, c) による詳細度のスコア表記

CSS詳細度は、(a, b, c) の3桁の数値ペアで評価されます。

  • a (IDセレクタ): #header などのID指定数。
  • b (クラス・属性・疑似クラス): .btn, [type="text"], :hover などの個数。
  • c (要素・疑似要素): div, p, ::before などの要素名個数。

※ (1, 0, 0) は (0, 99, 99) よりも常に優位に立ちます。インラインスタイル（style=""）は最優先され、!important はカスケード計算の最上位に割り込みます。