CSSのスタイル適用の優先順位について

はじめに

HTMLでマークアップした要素に対してCSSを適用させようとすると、CSSがうまく適用されなくてデザインが反映されないという状況に陥ったので原因を調べているとどうやらスタイルの適応の優先順位が関係しているということがわかったので記録を残すことにしました。

---

CSSのスタイルの優先順位のルール

1. !important
   CSSのプロパティに!importantが指定された場合、そのスタイルが最優先されます。ただし、多用しすぎるとコードの保守性が悪くなるため使いすぎ注意

   <h1 id="example">優先順位</h1>
   

   /* プロパティに!importantを指定しているためh1タグのスタイルが適用 */
   h1 {
       color: blue !important;
   }
   
   #example {
       color: red;
   }
   

   
   
2. スタイルの指定場所
   同じセレクタが複数の場所で指定された場合は、後に指定されたスタイルが適用される

   <h1>優先順位</h1>
   

   /* 後に指定されたh1タグのプロパティredがスタイルが適用 */
   h1 {
       color: blue
   }
   
   h1 {
       color: red
   }
   

   
   
3. インラインスタイル
   HTML要素のstyle属性で直接指定されたスタイルは他のスタイルよりも優先される。ただしメンテナンスが低下するため避けるべき

   <p style="color:red;">インラインスタイル</p>
   

   
   
4. IDセレクタ
   IDセレクタはクラスセレクタよりも優先されるが再利用性が低い

   <h1 id="example" class="example-title">Hello World!!</h1>
   

   /* IDセレクタのプロパティbuleのスタイルが適用 */
   #example {
       color: bule;
   }
   
   .example-title {
       color: red;
   }
   

   
   
5. クラスセレクタ・属性セレクタ・擬似セレクタ
   クラスセレクタや属性セレクタ、擬似セレクタはタグセレクタよりも優先順位は高く再利用性が高い

   <p class="example">Hello World!!</p>
   

   /* クラスセレクタのプロパティrbuleのスタイルが適用 */
   p {
    color: red;
   }
   
   .example {
       color: bule;
   }
   

   
   
6. タグセレクタ
   タグ名で指定されたセレクタは他のセレクタよりも優先順位は低い

       <h1>Hello World</h1>
   

   h1 {
       color: red;
   }
   

---

まとめ

スタイル適用の優先順位を理解することで意図したデザインが正しく表示されることだけではなくコードの保守性、パフォーマンスの向上など生産性を高めるより高品質なデザインを実装することが可能