Toolipedia 埋め込み
JA
← すべてのテキストツール

CSS詳細度計算

どのCSSセレクターが優先されるかを、各セレクターのスコア（ID、クラス、要素）とともに調べます。

  • 無料
  • 登録不要
  • どの端末でも使える

約CSS詳細度計算

CSSセレクターを貼り付けると、それぞれの詳細度が3つの数字で表示されます。IDの数、クラス・属性・疑似クラスの数、要素の数の順です。ソース上の順序に関係なく、スコアが高いほうが優先され、同点なら後のルールが優先されます。インラインスタイルはすべてのセレクターに勝ち、!importantはそれらに勝ちます。

CSS詳細度計算の使い方

  1. 1行に1つずつ、1つ以上のCSSセレクターを入力または貼り付けてください。
  2. IDs、クラス、要素として表示される、それぞれのスコアを確認してください。
  3. スコアを比べて、どのルールが優先されるかを確認してください。

このツールを使う理由

別名

よくある質問

クラスセレクターの詳細度はいくつですか?

単一のクラスは0,1,0と数えられます。IDは1,0,0、divのような単純な要素は0,0,1です。1つの小数としてではなく、左から右に比較します。

2つのセレクターの詳細度が同じ場合はどうなりますか?

スタイルシートの後ろに出てくるルールが優先されます。そのため、順序が重要になるのは、スコアが等しい場合だけです。

importantは、詳細度を上書きしますか?

はい。importantが付いた宣言は、詳細度に関係なく、通常のものに勝ちます。あとからの上書きが難しくなるため、控えめに使ってください。

CSS詳細度計算は無料ですか？

はい。ToolipediaのCSS詳細度計算は無料で、登録不要、透かしもありません。

安全に使えますか？

はい。すべての計算はブラウザ内で行われ、入力した内容が当社サーバーに送信されることはありません。

スマートフォンでも使えますか？

はい。AndroidやiPhoneの最新ブラウザのほか、タブレットやパソコンでも使えます。インストールは不要です。

アカウントは必要ですか？

いいえ。ページを開いてツールを使うだけです。登録もメールアドレスも不要です。

CSS詳細度計算 を自分のサイトに置けますか？

はい。ツールの下にある「サイトに埋め込む」ボタンで短いコードをコピーし、ページに貼り付けてください。無料でアカウントも不要、ツールはページ内でそのまま動作します。

関連ツール