CSS詳細度計算機
CSSセレクタの詳細度（Specificity）を計算・比較。 スタイルの優先順位を把握してCSS設計を改善。
🎯
セレクタを追加して詳細度を比較しましょう
詳細度の見方
インライン
style属性による直接指定
ID
#id による指定
クラス/属性/擬似クラス
.class、[attr]、:hover などによる指定
要素/擬似要素
div、p、::before などによる指定
このツールをシェア
📖
使い方
Step 1
セレクタ入力
CSSセレクタを入力
→
Step 2
詳細度計算
詳細度が自動計算される
→
Step 3
結果確認
詳細度の値と比較結果を確認
✨
このツールの特徴
即時計算
セレクタ入力と同時に詳細度を計算
セレクタ比較
複数セレクタの詳細度を並べて比較
視覚的表示
詳細度を(a, b, c)形式とバーグラフで表示
❓
よくある質問
セレクタの優先度を決める仕組みで、IDセレクタ > クラスセレクタ > 要素セレクタの順に高くなります。
🔗関連ツール
🔐
開発者向けパスワード生成器
強力でランダムなパスワードを瞬時に生成。 文字数や使用する文字種を自由にカスタマイズ可能。
📋
開発者向けJSON整形・検証
JSONデータを見やすく整形・構文検証。 インデント調整や1行への圧縮（minify）にも対応。
🆔
開発者向けUUID/GUID生成器
UUID v4をワンクリックで生成。 最大100個の一括生成、大文字変換、ハイフン有無の切替に対応。
🔗
開発者向けURLスラッグ生成器
テキストからSEO向けのURLスラッグを生成。 日本語のローマ字変換や特殊文字の自動除去に対応。
🕐
開発者向けUnixタイムスタンプ変換器
Unixタイムスタンプと日時を相互変換。 現在時刻のタイムスタンプ取得にも対応。
📷
開発者向けQRコードスキャナー
画像に含まれるQRコードを読み取ってデコードするツール。 URLの場合はリンク表示、テキストはワンクリックでコピー可能。