【CSS】詳細度について - rails　技術ブログ

詳細度(高い順)
!important
インライン記法(style属性)
IDセレクタ
クラスセレクタ・属性セレクタ・擬似クラス
要素セレクタ・擬似要素
ユニバーサルセレクタ

!importantの使い方

プロパティの値の後ろに半角スペースを空けて!importantと記述する

.title {
  color: red !important;
}

※基本的には!importantの使用は避ける。
(どの宣言も上書きしてしまうため、!importantを多用してしまうとメンテナンスが難しくなる)

使用を想定する場面：
外部のCSS (ブートストラップなど) を上書きする場合など

インライン記法の使い方

HTMLのstyle属性で指定する

<div style="color: red;">Hello World</div>

※!importantと同じ理由で、基本的には使用せずにスタイルを適用できないかを考える

IDセレクタ

#title {
  color: red;
}

IDはページの中で一度のみ使うことができる。
(同一ページ内の違う要素に同じIDを指定することはできない)

CSSのセレクタとしては最も高い詳細度になるため、よほどの理由がない限りIDセレクタでスタイルを当てるのはNG

クラスセレクタ、属性セレクタ、擬似クラス

// クラスセレクタ
.title {
  color: red;
}

// 属性セレクタ(↓class属性を持っているpタグにのみ適用される)
p[class] {
  color: red;
}

// 擬似クラス(:hoverのこと。aタグにカーソルが当たっているときに適用される)
a:hover{
  color: red;
}

クラス属性はIDとは異なり、同一ページで何度でも使うことができる

要素セレクタ

p {
 color: red;
}

クラスセレクタよりも詳細度は低くなる。
HTMLの構造へ依存するため(例えば、pタグをh1に変更したらcssの表記も変えなくてはならない)、基本的にはあまり使わない

<p>Hello world</p>
<!-- このpタグをdivに変えたらcssも変更する必要がある -->
↓
<h1>Hello world</h1>

p {
 color: red;
}
↓
h1 {
   color: red;
}

クラス指定していれば変更する必要がない

<p class="title">Hello world</p>
↓
<h1 class="title">Hello world</h1>

.title {
 color: red;
}

◆参考にしたサイト・書籍

詳細度 - CSS: カスケーディングスタイルシート | MDN