0Pricing
CSS Academy · レッスン

詳細度の計算：インラインスタイル・ID・クラス・要素

詳細度のスコアを計算し、スタイル競合でどのルールが優先されるかを予測します。

「詳細度の計算：インラインスタイル・ID・クラス・要素」はCoddyKit上の無料CSS Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはCSS Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 CSS Academyコースには全4レッスンが含まれています。

詳細度とは何ですか

詳細度は、同じ要素とプロパティを対象とする複数のCSSルールがある場合に、どのルールが適用されるかを決定します。詳細度は4つの部分からなるスコア (A, B, C, D) として計算され、Aが最も高く、Dが最も低い値です。

詳細度の構成要素

4つの列は次のとおりです。

  • A：インラインスタイル（style=""属性）= 1,0,0,0
  • B：IDセレクター（#id）= 0,1,0,0
  • C：クラスセレクター（.class）、属性セレクター、疑似クラス = 0,0,1,0
  • D：型（要素）セレクター、疑似要素 = 0,0,0,1

詳細度の例

詳細度を計算します。

<p>Plain paragraph — matches <code>p</code></p>
<p class="card">Card paragraph — matches <code>.card</code></p>
<div id="header">
  Header block — matches <code>#header</code>
  <span class="logo">Logo — matches <code>#header .logo</code></span>
</div>
<p class="intro">Intro paragraph — matches <code>p.intro</code></p>
<nav class="nav">
  <a href="#" class="nav-link active">Active link — matches <code>.nav .nav-link.active</code></a>
</nav>

ユニバーサルセレクターの詳細度はゼロ

ユニバーサルセレクター *、コンビネーター（+、>、~、空白）、疑似クラス :where() は、詳細度にゼロ（0,0,0,0）しか加算しません。

インラインスタイルが優先される

インラインスタイル（style=""属性）の詳細度は最も高く、(1,0,0,0)です。スタイルシートのルールからこれを上書きできるのは、!importantだけです。

詳細度スコアの比較

左から右へ比較します。スコアが異なる最初の列で、どちらが優先されるかが決まります。IDの列が直ちに勝敗を決めるため、(0,1,0,0)は(0,0,99,99)より優先されます。

:is()、:not()、:has()の詳細度

:is()、:not()、:has() は、最も詳細度の高い引数の詳細度を持ちます。

<div id="header">:is(#header, .nav) match via ID</div>
<nav class="nav">:is(#header, .nav) match via class</nav>
<button class="active">Active button (excluded from :not(.active))</button>
<button>Plain button (matches :not(.active))</button>
<p class="p">:where(.p) paragraph</p>

nth-childの詳細度

:nth-child()、:first-child、:hoverなどの疑似クラスはすべて、クラスと同じレベルの詳細度である(0,0,1,0)を加算します。

疑似要素の詳細度

::before、::after、::first-lineなどは、要素と同じレベルの詳細度である(0,0,0,1)を加算します。これらはD列に該当します。

詳細度は継承ではない

詳細度は、要素ごと、プロパティごとに計算されます。特定のプロパティでは、詳細度の高いルールが優先されます。ただし、詳細度の高い親要素から継承された値が、子要素に直接適用された、より詳細度の高いルールに勝つことはありません。

詳細度の計算ツール

specificity.keegan.stなどのオンラインツールやブラウザーのDevToolsを使って、詳細度を確認してください。DevToolsでは、Stylesパネルで取り消し線が付いたスタイルは、より詳細度の高いルールが優先されたことを示します。

確認問題

#sidebar .linkと.nav .nav-item .nav-link.activeでは、どちらのセレクターの詳細度が高いですか。

まとめ

詳細度のスコアは(A, B, C, D)で表され、インラインスタイル、ID、クラス・属性・疑似クラス、要素・疑似要素の順です。左から右へ比較し、最初に異なる列で勝敗が決まります。:where()は常にゼロとして扱われます。IDは、クラスセレクターがいくつあってもそれらを上回ります。DevToolsのStylesパネルで、どのルールがなぜ優先されたのかを確認してください。

よくある質問

「詳細度の計算：インラインスタイル・ID・クラス・要素」レッスンは無料ですか？

はい。「詳細度の計算：インラインスタイル・ID・クラス・要素」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、CSS Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 CSS Academyコースには全4レッスンが含まれています。

「詳細度の計算：インラインスタイル・ID・クラス・要素」で何を学びますか？

詳細度のスコアを計算し、スタイル競合でどのルールが優先されるかを予測します。 ブラウザで直接実行するハンズオンコードでCSS Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

CSS Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのCSS Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。

「詳細度の計算：インラインスタイル・ID・クラス・要素」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このCSS Academyレッスンでコードを書いて実行できますか？

はい。すべてのCSS Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. 詳細度の計算：インラインスタイル・ID・クラス・要素
  2. カスケード：OriginとOrder
  3. !important：使う場面と避ける理由
  4. 継承とallプロパティ
← CSS Academyに戻る