詳細度
CSS Specifishity
spec
mdn
割と良い
詳細度のアルゴリズムは、3種類のselectorで決定する
ID-CLASS-TYPEのような表記になる
ID
ID selector
1-0-0を追加
e.g. #id
CLASS
class selectorやattribute selectorや擬似クラス
0-1-0を追加
e.g. .class, :first-child, [type=password
TYPE
type selectorや疑似要素
0-0-1を追加
e.g. h1, ::before
値なし
*や:where()
詳細度に影響を与えない
0-0-0を追加
詳細度は10進数の加点方式ではない
!importantやinline CSSは仕様的には、詳細度とは関係のない概念
CSSにはもっと広い概念として、Cascadeの優先順位がある
詳細度はその中の1要素
ID-CLASS-TYPEと同じモデルで表記したら、
inline CSSは、1-0-0-0
!importantは、1-0-0-0-0
っぽくなるよってだけで、厳密な話ではない
例 ref
code:css
#myApp id="myElement" {
color: green; /* 1-1-0 - 勝ち!! */
}
#myElement {
color: yellow; /* 1-0-0 */
}
.bodyClass .sectionClass .parentClass {
color: yellow; /* 0-3-0 */
}
参考
エンジニアはもう一度CSSとちゃんと向き合ってみよう - 詳細度編 - Qiita
#WIP
https://web.dev/reduce-the-scope-and-complexity-of-style-calculations/
詳細度とパフォーマンス