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

2020年9月22日

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

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

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

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

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

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

詳細度が高いほど、優先して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;
}

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

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

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

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

でわでわ