CSSが効かない…CSSの優先順位を決める詳細度とは?

こんにちは!今回は、CSSの詳細度についてお伝えしたいと思います。

「CSSが効かない…記述方法に誤りはないはずなのにおかしいな…」

今回はこういった悩みに対して、一つの解決のヒントになるかもしれません。

記事にした理由はprogateやudemyの学習コンテンツであまり触れられていなかったためです。

CSSの詳細度とは?

詳細度(Specificity)は、どの CSS プロパティが要素に最も関係があるか、すなわち適用されるかをブラウザーが決定する手段です。

出典:MDN

詳細度の順序はこのようになっています。

  1. !important
  2. インライン記述(style属性)
  3. IDセレクタ
  4. クラスセレクタ・属性セレクタ・擬似クラス
  5. 要素セレクタ、擬似要素
  6. ユニバーサルセレクタ

詳細度が高いほど、優先してCSSが適用されます。

補足

では、一つのセレクタに複数のCSSが適用されていた場合はどうなるのか

詳細度が同じ場合・・・ あとから宣言されるルールセットが適用される(これはお馴染みですよね)

詳細度が異なる場合・・・詳細度が高いほど(詳細であるほど)そのルールセットが適用される

各詳細度の説明

1.!important
基本的に避けたほうがいい
能動的、意図的に使うならOK

.primary{
color: green !important;

2.インライン記述(style属性)
基本的に避けたほうがいい -> 外部のCSSファイルで一元管理
JSでのCSS操作も同様

<button style=“color: green:>保存する</button>

3.IDセレクタ
IDはドキュメント(ページ)の中で一度のみ使うことができるもの

#primary{
color: green;
}

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

//クラスセレクタ
.primary{
color: green;
}

//属性セレクタ
p[class] {
color: red;
} 

//擬似クラス
a:hover {
color: green;
}

5.要素セレクタ、擬似要素

//要素セレクタ
p{
color : #F80206; 
}

//擬似要素
::after {
color: green;
} 

6.ユニバーサルセレクタ (*)
処理速度が遅くなるので、推奨されていない

//ユニバーサルセレクタ
* {
color: green;
} 

詳細度はこれで全てではありません。。。

1つのクラスセレクタと2つのクラスセレクタのルールセットがあった場合は後者が優先されるなどのルールもあるようです。

今回参考にさせていただいた本はこちらです。

Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正し ...
『CSSの教科書』(谷 拓樹)

今回はこの辺りで終わりにしたいと思います。

でわでわ

Leave a comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA