CSSの詳細度について

概要

CSSの詳細度についてまとめた
範囲が狭いものほどスタイルが優先されるイメージ
インライン＞id＞CLASS＞

詳細度とは

• 詳細度（specity）は、CSSのスタイルがブラウザで適用される際に、どのスタイルが優先されるかを決定するための指標
• 詳細度は、CSSセレクタの組み合わせに基づいて計算される
• セレクタは要素タグ、クラス名、ID名などで構成され、それぞれに詳細度のポイントが割り当てられる

詳細度の計算

基本的にはID、CLASS、TYPEの3つのセレクターに対応し、それぞれの重み分類に含まれるセレクターの成分の数を表す3列の値で構成される。

• ID列

  • 重みの値に1-0-0が追加される
    • 一意の要素に対して特定のスタイルを適用する
    • CSSのセレクタとして使用する場合、#（ハッシュ）記号を前に付けて指定

      <div id="myElement">This is a sample element.</div>
      

      #myElement {
        color: red;
      }       
      

  
  

• CLASS列

  • 重みの値に0-1-0が追加される

  • クラスセレクタ、属性セレクタ、疑似クラス

    1. クラスセレクタ
       • HTML要素にクラス名を指定してスタイルを適用するためのセレクタ
       • クラス名はドット（.）で始まり、複数の要素に同じクラス名を指定することができる

         <p class="highlight">This is a paragraph.</p>
         

         .highlight {
             background-color: yellow;
         }
         

         
         
    2. 属性セレクタ
       • HTML要素の属性に基づいてスタイルを適用するためのセレクタ
       • 属性セレクタは角括弧（[]）で属性名と属性値を指定する

         <input type="text" value="Name">
         

         input[type="text"] {
           border: 1px solid black;
         }
         

         
         
    3. 疑似クラス
       • 要素の特定の状態や位置に基づいてスタイルを適用するためのセレクタ
       • 擬似クラスはコロン（:）で始まり、要素の後に指定

         <a href="#">Click me</a>
         

         a:hover {
           color: red;
         }
         

• TYPE列

  • 重みの列に0-0-1が追加される
    • タイプセレクタ、疑似要素
      1. タイプセレクタ
         • 要素に対して直接指定

           <p>This is a <span>highlighted</span> text.</p>
           

           h1 {
             color: blue;
           }
           

      2. 疑似要素
         • 要素の特定の部分に対してスタイルを適用するためのセレクタ
         • 擬似要素はコロン（:）で始まり、要素の後に指定される

           <p>This is a <span>highlighted</span> text.</p>
           

           この場合、疑似要素::first-letterを使用して、

           要素の最初の文字のスタイルを適用することができます。

           p::first-letter {
             font-size: 24px;
             font-weight: bold;
           }
           

• 例外

  • !important
    • 詳細度とは関係がないがスタイルが最優先される
  • インライン
    • 常に上書きをする
    • 1-0-0-0の重みと考える
  • :where
    • 常に詳細度が０に置き換えられる

参考

• https://developer.mozilla.org/ja/docs/Web/CSS/Specificity
• https://webdesign-progress-diary.com/coding-design/css/specificity/