はじめに
フロントでの開発をする上で、CSSを設定することは避けて通れないと思います。
そのような中で、cssファイルにスタイルを設定したにも関わらず、画面に反映されていないという経験をしたことがある人も少なくないのではないでしょうか。そこで、cssが適用される優先度（詳細度）を計算する方法をまとめました。思ったようにスタイルが反映されない場合はこの詳細度に基づいて正しく設定できているか見直してみてください！
CSSの詳細度とは？
CSSで複数のルールが同じ要素に適用されそうなとき、どのスタイルが優先されるかを決めるものです。
詳細度の表し方
CSSの詳細度は、以下の 4つの値 (a, b, c, d) の形で表します。
| レベル | 説明 | 対象 |
|---|---|---|
| a | インラインスタイル | <p style="color: red;"> |
| b | IDセレクタ | #main |
| c | クラス、属性セレクタ、疑似クラス |
.btn, [type="text"], :hover
|
| d | 要素セレクタ、疑似要素 |
div, ::before
|
レベルa（インラインスタイル）
style属性で直接書かれているスタイルです。
<p style="color: red;">Hello</p>
レベルb（IDセレクタ）
HTML要素に付けたidを対象にしたセレクタです。
#main { }
#nav-bar .item { }
レベルc（クラス、属性、疑似クラス）
(1) クラスセレクタ
.button {}
.container-fluid {}
(2) 属性セレクタ
HTML要素の属性（type="", href=""など）を指定してスタイルを当てます。
input[type="text"] {}
a[target="_blank"] {}
(3) 疑似クラス
:◯◯ の形で、ユーザー操作や構造的な条件を表します。
a:hover {}
input:focus {}
li:first-child {}
:not(.active) {}
レベルd（タグ（要素）、疑似要素）
(1) 要素セレクタ（HTMLタグそのもの）
div {}
h1 {}
p {}
ul li a {}
(2) 疑似要素
要素の中の特定の部分や、実際にはHTMLに存在しない仮想要素にスタイルを当てます。
p::before {}
a::after {}
input::placeholder {}
詳細度の計算方法
- セレクタを分解する
- それぞれの種類ごとに数をカウントする
- 4桁の数値
(a, b, c, d)にまとめる
例：#main .card:hover h2
#main → ID → b = 1
.card, :hover → クラス + 疑似クラス → c = 2
h2 → 要素セレクタ → d = 1
→ 詳細度：(0, 1, 2, 1)
詳細度の比較方法
詳細度(a, b, c, d)を、左から順に比較して、大きい方が優先されます。
比較ルール：
a の値を比較
→ (aが等しい場合) b を比較
→ (bが等しい場合) c を比較
→ (cが等しい場合) d を比較
例：
#header .nav a ：(0, 1, 1, 1)
.main-content h1：(0, 0, 1, 1)
→ (0, 1, 1, 1) の方が、IDセレクタがあるため優先されます。
詳細度が同じだった場合
詳細度が完全に同じ場合は、CSSファイル内で後に書かれた方が優先されます。
.button {
color: red;
}
/* 同じ詳細度なら、これが優先される */
.button {
color: blue;
}
!importantは最優先
詳細度に関係なく、!important のあるスタイルが優先されます。
（スタイルの管理が難しくなるので、基本は避ける）
/* これが優先される */
.button {
color: red !important;
}
#main .button {
color: blue;
}
※同じプロパティに複数の !important がある場合は、詳細度で比較されます。
自動計算ツール（Specificity Calculator）
詳細度を自動で計算してくれるツールもあるので、cssの構造が複雑で詳細度を考えるのが難しい場合は活用してみてください。
Specificity Calculator
最後に
詳細度の計算方法は理解できたでしょうか？CSSを当てる際にこの記事の内容を活用していただけたら幸いです。詳細度を計算するときに他に考慮するべき点などがあればぜひ教えてください。