社内勉強会のメモ
CSSセレクタの詳細度とは
仕様
https://www.w3.org/TR/selectors-3/#specificity
仕様にもある通り、「詳細度」というのは
selector's specificity
なので、「セレクタの詳細度」のこと。
詳細度は計算できる。
MDN
https://developer.mozilla.org/ja/docs/Web/CSS/Specificity
詳細度Specificityは、どの CSS プロパティが要素に最も関係があるか、すなわち適用されるかをブラウザーが決定する手段です。詳細度は様々な組み合わせの CSS セレクターで構成される一致規則に基づいています。
「ちゃんとプロパティを書いてるのに適用されない！」みたいになってDevToolsを開いてみたら、実際に当てたいプロパティに打ち消し線が入っている、みたいなことが起きうる原因。
※以下の文章の引用は、注釈が無い限りこちらのページからの引用となります。
基本
単品で比べた時のプロパティの優先度の高さの順番は以下の通り
（ここで「詳細度」と書いていないのは、厳密に言えば!importantとstyle属性はセレクタでは無いので、セレクタの詳細度とは別の仕様であるため）
高
0. HTML上のstyle属性に書かれたプロパティ
1. !important
2. IDセレクタ
3. クラスセレクタ、属性セレクタ、擬似セレクタ
4. 要素型セレクタ、擬似要素
5. CSSの記載順序がうしろのプロパティ
低
HTML上のstyle属性に書かれたプロパティ
要素に追加されたインラインスタイルは、常に外部スタイルシートの中のスタイルを上書きします
セレクタの詳細度とは別の仕様で、CSSに書かれたプロパティを上書きするので、最も優先度が高い。
!important
!important 規則がスタイル宣言で使われたとき、それが宣言リストのどこであっても、この宣言は CSS 内で作られたその他の宣言を上書きします。
セレクタの詳細度とは別の仕様で、他のプロパティを上書きするので、優先度が高い。
同じプロパティに!importantが記載された場合は、セレクタの詳細度が適用される。
世紀末な無法地帯になるので使わないでください。
IDセレクタ、クラスセレクタ、属性セレクタ、擬似セレクタ、要素型セレクタ、擬似要素
- IDセレクタ：
#hoge - クラスセレクタ：
.hoge - 属性セレクタ：
[name="hoge"] - 擬似セレクタ：
:hover - 要素型セレクタ：
div - 擬似要素：
::before
これらがセレクタの詳細度の仕様で言及されているセレクタたち。
全称セレクター (*), 結合子 (+, >, ~, ' ', ||), 否定疑似クラス (:not()) は詳細度に影響を与えません。 (但し、 :not() の中で宣言されたセレクターは影響を与えます。)
詳細度の計算方法
考え方
セレクタたちは全員、詳細度の点数を持っている。
セレクタ {
プロパティ: 値;
}
というCSSの記法のうち、「セレクタ」部分に登場するセレクタたちの点数の合計が、カギカッコの中の「プロパティ」たちの詳細度となる。
セレクタの点数
| セレクタ | 点数 |
|---|---|
| ID | 100 |
| クラス、属性、擬似 | 10 |
| 要素型、擬似要素 | 1 |
| 全称、結合子、否定擬似クラス | 0 |
例
.hoge.piyo{background-color:blue;}.hoge{background-color:red;}というファイルがあったとして、上下のそれぞれの詳細度は
- 上：クラスセレクタ（10点）が2個なので20点。
- 下：クラスセレクタ（10点）が1個なので10点。
通常であればcssは後に書いたプロパティが優先されるが、このファイルの場合上に書かれたセレクタの方が詳細度が高いので、上のbackground-color: blue;が適用される。
HTMLファイルを表示する
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title>CSSの詳細度</title><style>.hoge{width:200px;height:200px;}.hoge.piyo{background-color:blue;}.hoge{background-color:red;}</style></head><body><divclass="hoge piyo"></div></body></html>