CSS詳細度計算機

1つ以上のセレクターのCSS詳細度を (A, B, C) タプルとして計算します — ID、class/attribute/pseudo-class、type/pseudo-element の数 — スタイルルールが優先されない理由をデバッグするため。

入力

CSSセレクター

出力

詳細度

セレクター	ID	クラス	タイプ	詳細度
No data yet

役に立ちましたか？

このツールを使う他の方法

REST API

curl -X POST https://api.iotools.cloud/v1/tool/css-specificity-calculator \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "selectors": "#header"
  }'

ご自身のアカウントのキーに差し替えてください。ツールのフィールドがそのままリクエストボディになります——ラッパーはありません。

AIエージェントに依頼する

Use the IOTools `css-specificity-calculator` tool (CSS Specificity Calculator) on this input:

YOUR_INPUT_HERE

IOTools MCPサーバーに接続された任意のエージェントにこれを貼り付け、入力内容を追加してください。

埋め込みウィジェット

<iframe
  src="https://iotools.cloud/embed/css-specificity-calculator/"
  width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
  title="CSS詳細度計算機 — iotools.cloud"
  sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
  allow="clipboard-write"
  style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>

ご自身のページに貼り付けるだけ——無料、キー不要、リンクを掲載するだけです。

API/MCP 1回あたりの費用	5クレジットから
クレジットが足りませんか?	料金を見る

次の方法でも利用可能

統合ブラウザ拡張機能 VS Code拡張機能

ガイド

CSS詳細度とは何か？

2つのCSSルールが同じ要素をターゲットにし、同じプロパティを設定する場合、ブラウザはどちらが優先されるかを決定するためにタイブレーカーが必要です。そのタイブレーカーが詳細度です — セレクター自体から計算されたスコアであり、ルールがスタイルシート内のどこに出現するかではありません（それは詳細度が等しい場合の最終的なタイブレーカーとしてのみ重要です）。より詳細度の高いセレクターは、常にルールが最後に書かれたかどうかに関わらず、詳細度の低いセレクターを上回ります。

(A, B, C) システム

詳細度は3つの数字で表され、バージョン番号のように左から右に比較されます — A の任意の差は B のいかなる差も上回り、B の任意の差は C のいかなる差も上回ります：

A — ID セレクター。 セレクター内の各 #id は1を加算します。
B — クラス、属性、疑似クラス。 各 .class、[attr]、または :hover スタイルの疑似クラスは1を加算します。
C — タイプと疑似要素。 各タグ名 (div、a) と各疑似要素 (::before、::after、および従来のシングルコロン形式 :before/:after/:first-line/:first-letter) は1を加算します。

ユニバーサルセレクター (*) とコンビネーター ( 、>、+、~) は常に0を生成します — それらは何がマッチするかを絞り込みますが、マッチがどの程度詳細であるかではありません。したがって、#header は (1, 0, 0) となり、.nav a:hover は (0, 2, 1) となり（2つのクラス風セレクター、1つのタイプ）、.btn.btn-primary — 同じ要素上の2つのクラス — は (0, 2, 0) となり、単一クラスルールを上回ります。たとえそれが「同じ種類」のセレクターであっても。

`:not()` / `:is()` / `:has()` の落とし穴

最新のCSSは、:not()、:is()、:has() をフラットな疑似クラスではなく、最も詳細な引数の詳細度によってスコアリングします。この計算機は代わりに、より単純なSelectors-4前の近似を使用します：これら各々（および :nth-child() などの他の機能疑似クラス）は単一の疑似クラスとしてカウントされます — 括弧内に何があるかに関わらず B への +1 のフラット値です。これは文書化されたスコープカット（バグではありません）です：パーサーをシンプルに保ち、一般的なケース（単一の非ネストされた引数）に対して正確ですが、内部に ID を含む何かをラップする :not() は過小評価されます。:where() は仕様により常に0となり、その内容に関わらず。

使い方

1行に1つのCSSセレクターを貼り付けてください — .btn のようにシンプルなものから #main .content > p::before:hover のように複合的なものまで。各行は、ID、クラス、タイプの数と組み合わせた (A, B, C) スコアを含む独自の行を取得します。入力すると結果がリアルタイムで更新されます。

FAQ

なぜ div > p::before は #main に勝つ... それとも勝たない？ 勝ちません — ID (A) は常にあらゆる数のタイプセレクターまたは疑似要素 (C) を上回ります。3つの数字の比較方法の定義によってです。

詳細度が等しい場合、ルールの順序は重要ですか？ はい — 2つのルールが同じ詳細度を持つ場合、カスケード内でより後に出現する（または後で読み込まれた）ルールが勝ちます。!important は詳細度を完全に上書きし、インライン style="" 属性はセレクターベースのルールをすべて上回ります。

.a, .b のようなセレクターリストを処理しますか？ セレクターごとの詳細度分析のため、カンマで区切られた各グループを独自の行として扱ってください — セレクターリストはそのルールを各セレクターに独立して適用し、各々は異なる詳細度を持つことができます。

プライバシー

解析とスコアリングは完全にあなたのブラウザ内で行われます。貼り付けたセレクターはアップロードまたは保存されることはありません。

cssspecificityselectorsweb-development

ツールが気に入りましたか？広告をなくしましょう。

1回のお支払いでアカウントから広告が完全になくなります。サブスクリプションも追跡もありません。

広告を削除