いつも仕様を忘れてしまうので自身のメモとしてざっくりまとめる
仕様について
Selectors Level 4 - 17. Calculating a selector’s specificity
詳細度と他の要素の関係
詳細度以前に順番を決めるルールが存在するが、それは別の記事で記載したのでそちらを参考のこと。
2024年1月時点のCSS記述の採用順番についてざっくり理解する - コード日進月歩
ルールについて
以下の内容で決まる
詳細度のA,B,Cのカウントで勝る内容（A,B,Cに関しては後述） 1. Aの数を比べて数値が高い方 2. Aが同じ場合、Bの数値が高い方 3. AもBも同じ場合、Cの数値が高い方 4. AもBもCも同じ場合、記述がファイルのあとにある方
詳細度には3つのカウント数値をもとに決める。
| カウンタ名称 | 何をカウントするか |
|---|---|
| A (ID列) | 「IDセレクタ(ex.#example)」のカウント |
| B (CLASS列) | 「クラスセレクタ(ex..example)」「属性セレクタ(ex.[name="example"])」「擬似クラス(ex.:hover)(一部除く※1)」のカウント |
| C (TYPE列) | 「要素型セレクタ(ex.div)」「疑似要素(ex. ::before)」 |
※1 :where() は記載してもカウントは増えず,:not().:has(),:is() は引数の要素でもっとも高い詳細度のカウントを+1する。
このABCは (A, B, C)や A-B-Cという表現をする。
例
<div> <p name="example" id="first"> sample text </p> </div>
というHTMLがあった場合に、以下のCSSはすべて上記のDOMには適用されるが、color に関しては詳細度が一番高いものが適用されるので、文字色は緑になる。
div p { /* 詳細度は(0,0,2) */ color: red; } div p#first { /* 詳細度は(1,0,2) そのため他3つよりもこれが優先 */ color: green; } p#first{ /* 詳細度は(1,0,1) */ color: orange; } div p[name="example"] { /* 詳細度は(0,1,2) */ color: yellow; }
