CSSセレクター詳細度計算ツール
CSSの詳細度は、複数の宣言が競合するとき、ソース順やカスケードのほかの規則を考慮する前に、どの宣言が優先候補になるかを決めます。この計算ツールは1個のセレクターを受け取り、構文を検証したうえで、インラインスタイル、ID、クラス・属性・疑似クラス、要素型・疑似要素という4区分の値を返します。:is()、:not()、:has()、:where()、:nth-child()など、最新のセレクターに固有の規則も適用します。意図しない上書きの調査、リファクタリング時の比較、開発ツールへの安定した検査機能の追加にご利用いただけます。
無料で実行
4区分の詳細度を読み取る方法
結果は(インライン、ID、クラス、型)の順で表示されます。最初の値はインラインスタイル宣言を表しますが、このツールが受け取るのはHTMLのstyle属性ではなくセレクターなので、常に0です。2番目は<code>#checkout</code>のようなIDセレクターを数えます。3番目はクラスセレクター、属性セレクター、疑似クラスをまとめた値で、<code>.button</code>、<code>[disabled]</code>、<code>:hover</code>はそれぞれ1を加えます。4番目は要素型セレクターと疑似要素を数えるため、<code>button</code>と<code>::before</code>もそれぞれ1を加えます。全称セレクターと結合子は加算されません。各値を合計して十進数として扱うのではなく、左から順に比較してください。1個のIDは何個のクラスより強く、1個のクラスは何個の型より強くなります。名前付きフィールドはプログラムで扱いやすく、詳細度の配列は一般的な表示形式を保ちます。ただし、詳細度はカスケードの一要素にすぎません。生成元、重要度、カスケードレイヤー、スコープの近接性、ソース順によって、実際に優先される宣言が変わる場合があります。
関数型疑似クラスの規則
最新の関数型疑似クラスは、すべてのトークンを単純に数えるだけでは評価できません。<code>:is()</code>、<code>:not()</code>、<code>:has()</code>は、引数リスト内で最も強いセレクターの詳細度を採用し、疑似クラス自体のクラス値は加えません。一方、<code>:where()</code>は引数にIDが含まれていても常に0です。そのため、簡単に上書きできるライブラリの既定スタイルに適しています。構造疑似クラスの<code>:nth-child()</code>と<code>:nth-last-child()</code>は疑似クラスとして1を加え、任意の<code>of</code>セレクターリストがあれば、その中で最も強いメンバーの値も加えます。そのほかの関数型疑似クラスはクラス区分、疑似要素は型区分として数えます。パーサーは<code>:has()</code>内の相対セレクター、識別子のエスケープ文字、記号を含む属性値、名前空間、および<code>:before</code>、<code>:after</code>、<code>:first-line</code>、<code>:first-letter</code>という従来の単一コロン表記も認識します。括弧内を不透明な文字列として扱わず、現在のCSSに即して判定します。
検証によるセレクター誤りの検出
詳細度の値が役立つのは、入力が妥当なセレクターである場合だけです。そのため、必須フィールドの欠落、空文字列、閉じていない文字列・角括弧・丸括弧、不正な結合子、ピリオドやハッシュ記号の後に識別子がない状態など、構造上の誤りは結果を返さず拒否します。一度に受け付けるのは1個のセレクターです。最上位のカンマは詳細度が異なり得るセレクターリストを作るため、単一のセレクターを指定するよう案内して拒否します。ルールリストを比較する場合は、各メンバーを個別に計算してください。実行を予測可能にするため入力長には上限があり、ブラウザーセッション、ネットワーク、乱数、時計は使用しません。同じ入力から、ローカルウィジェット、API呼び出し、テストスイート、ビルド検査のどこでも同じJSONが得られます。結果を絞り込んだ診断に使い、詳細度だけで表示を説明できない場合は、カスケードレイヤー、<code>!important</code>、継承、ソース順もご確認ください。
活用例
上書きの原因を調査
競合するセレクターを比較し、どの区分が一方のルールを強くしているか確認できます。
スタイルシートの改修を確認
簡略化したセレクターが、IDや余分な疑似クラスを誤って加えずに詳細度を下げているか検査できます。
開発ツールを強化
リンター、エディター、CIレポートに、決定論的な検証と構造化された詳細度を追加できます。
よくある質問
インライン値は何を表しますか?
インラインスタイル宣言を表します。入力はHTMLのstyle属性ではなくCSSセレクターなので、ここでは常に0です。
:where()は詳細度を上げますか?
いいえ。:where()とその引数全体の寄与は常に0ですが、引数内のセレクター構造は検証されます。
:is()、:not()、:has()はどう数えますか?
引数リスト内で最も強いセレクターの詳細度を採用し、関数型疑似クラス自体の値は加えません。
カンマ区切りのセレクターリストを送れますか?
いいえ。リストの各メンバーは詳細度が異なる場合があるため、最上位のセレクターを1個ずつ送信してください。
詳細度が高ければ必ず優先されますか?
いいえ。生成元、重要度、レイヤー、スコープの近接性、ソース順が優先されたり、同点を解決したりします。
APIリクエストの料金はいくらですか?
APIリクエストごとに$0.002がかかります。ブラウザー版はセレクターをサーバーへ送らずローカルで実行できます。
開発者向け — APIアクセス
このページの機能はすべてAPIからも利用できます。自社システムに組み込みたいチーム向けのセクションです。それ以外の方は上のツールをそのままお使いください。
エンドポイント
Bearerトークンで認証し、POST1回でタスクをキューに登録します。結果はWebhookまたは署名付きリンクで受け取れます。
お使いのスタックから呼び出す
curl -X POST https://api.kit.forhosting.com/web/css-specificity-calc \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"selector":"article#main.card[data-state='\''open'\'']:hover > h2::before"}'const res = await fetch("https://api.kit.forhosting.com/web/css-specificity-calc", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"selector": "article#main.card[data-state='open']:hover > h2::before"
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/web/css-specificity-calc",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"selector": "article#main.card[data-state='open']:hover > h2::before"
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/web/css-specificity-calc", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"selector":"article#main.card[data-state=\'open\']:hover > h2::before"}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"selector":"article#main.card[data-state='open']:hover > h2::before"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/web/css-specificity-calc", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)リクエスト例
{
"selector": "article#main.card[data-state='open']:hover > h2::before"
}レスポンス例
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "web.css_specificity_calc",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}非同期APIです。task_idは即時に返ります。ポーリングは1秒あたり1リクエストまでです。
料金
単価はすべて公開しています。トークン換算や独自クレジットはありません。失敗したタスクは課金されません。
制限
max_chars | 10000 |
エラー
| HTTP | コード | 意味 |
|---|---|---|
401 | unauthorized | APIキーが無効か、指定されていません。Authorizationヘッダーを確認してください。 |
402 | insufficient_balance | 残高が不足しています。チャージ後に再度お試しください。 |
404 | unknown_type | 指定されたタスクタイプは存在しません。タイプ名を確認してください。 |
429 | rate_limited | リクエストが多すぎます。しばらく待ってから再度お試しください。 |