CSS Specificity Calculator — CSSセレクター詳細度計算ツール

CSSセレクターの詳細度を (a,b,c) 形式でリアルタイム計算するデスクトップツールです。

【主な機能】

✓ セレクターを入力すると (a,b,c) 詳細度を即時表示

✓ ID(a) / クラス・属性・擬似クラス(b) / 要素・擬似要素(c) を色分けで視覚化

✓ 最大8本のセレクターを並べて詳細度降順に自動ランキング

✓ !important 検出バッジ

✓ :where()、:is()、:not()、:has() など複雑な擬似クラスに正確対応

✓ サンプルセレクター8種をワンクリック読み込み

【デスクトップ版限定機能】

✓ CSSファイルをドラッグ＆ドロップして全セレクターを一括解析

✓ 解析結果を CSV ファイルにエクスポート

【こんな方におすすめ】

・ CSSのカスケード順序をデバッグしたい方

・ セレクター詳細度のルールを体感で学びたい方

・ 大きなCSSファイルから高詳細度セレクターを洗い出したい方

【動作環境】

Windows 10 / 11（64bit）

Microsoft Edge WebView2（Windows 11 は標準搭載）

【お問い合わせ】

[email protected]