CSSセレクター詳細度とは

「プロパティを書いてるのにスタイルが反映されない…」とつまずいた筆者が、原因を探る中でたどり着いたのがCSSの詳細度でした。この記事は、プログラミング初心者である筆者が、学習の過程でつまずいた経験をもとに備忘録としてまとめたものです。

CSSセレクター詳細度とは？

引用文
詳細度とは、ある要素にどのプロパティの値を使用するかを決めるために、ブラウザーが使用するアルゴリズムです。複数のスタイルブロックに、同じプロパティを異なる値で設定する異なるセレクターがあり、同じ要素を対象としている場合、その要素に適用されるプロパティの値は、詳細度によって決定されます。詳細度とは、基本的にセレクターの選択がどの程度具体的であるかを示す指標です。
引用文

https://developer.mozilla.org/ja/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance
簡単にまとめると、複数のセレクターが同じ要素に対してスタイルを指定したとき、どのスタイルを適用するかを判断するための仕組みです。各セレクターにはそれぞれ優先度が設定されており競合が発生した場合、より高い詳細度を持つセレクターが優先されます。

詳細度の決まり方

具体的には次のようなルールで計算します。

① IDセレクター（#id）
② classセレクター（.）、属性セレクター（[]）、擬似class（:)
③ 要素型セレクター、擬似要素セレクター（::）、（type列）

下記のように（id,class,type）別々に集計します。スタートは（0,0,0）
「#」なら（1,0,0）
「ul li」なら（0,0,2）
「h1 .」なら（0,1,1）

詳細度の見方

詳細度は、（id,class,type）という形式で表します。これを比較してより高いスコアを持つセレクターが優先されます。

#id > .class > element

結合子と全称セレクターの扱い

・結合子（>や+）は詳細度に影響を与えません。

ul > li {
  color: blue;
} /* 詳細度： (0, 0, 2) */

全称セレクター*も詳細度にカウントされない(0, 0, 0)。

* {
  margin: 0;
} /* 詳細度： (0, 0, 0) */

擬似クラス:not(),:has,:is()もカウントされない。しかしその内部のセレクター詳細度はカウントされる。

p:not(.highlight) {
  color: gray;
} /* 詳細度： (0, 1, 1) */

「：」コロンから始まる疑似クラスは「class列」にカウントされます。
しかし、上記はカウントされないので注意してください。
:not() の内部の .highlight はクラスセレクターなので 1点、p は要素型セレクターなので 1点。
:not() 自体は詳細度に影響を与えません。

詳細度アルゴリズム」が効かない例

・インラインスタイルがある場合

<p style="color: skyblue;">段落</p>

・!importantが使用された場合

p { color: red !important; }

⚠️インラインスタイルよりも優先されます

「属性セレクター」を使って「idセレクター」の詳細度を下げられる

[id="main"] { color: skyblue; }

「属性セレクター」は「class列」でカウントされるので、「idセレクター」を使うよりも詳細度が下がる。

複合セレクターを使用して詳細度を上げることもできる

.mo.mo.mo { color: red; }

詳細度は低く書く

CSSを書く際は、セレクターの詳細度を低く保つことを意識すると、スタイルの管理が楽になるようです。
具体的には、#idの使用は控えめにし、要素型セレクター（h1、pなど）やクラスセレクター（.class）を中心にスタイルを設計することが推奨されています。

まとめ

・#id > .class > elementの順で優先されます。
・!importantは最優先されますが、使いすぎに注意。
・詳細度を低く抑えることで、スタイルの管理が楽になります。

参考
https://qiita.com/ryokkkke/items/ec1ca2baebe4a984f7a6
https://developer.mozilla.org/ja/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance