CSSセレクタの優先順位
https://gyazo.com/dfb1f9e8506a2c80026e1d676084933d
Specifishity :: Specificity with Fish
CSS Specifishity
#CSSセレクター
カスケードと継承 - ウェブ開発を学ぶ | MDN
詳細度という値によってセレクタの優先順位が決まる
詳細度 - CSS | MDN
詳細度には（基本的には）3つの列があり、x-y-zという形で表記される
左側の列の方が優先度が高く（重みが強く）、右側の列の方が優先度が低い
それぞれの列は左から順に以下の通り
ID列
IDセレクターが該当
CLASS列
クラスセレクターや属性セレクターや擬似クラスセレクターが該当
TYPE列
要素型セレクターや擬似要素セレクターが該当
例外として以下のセレクターは詳細度にカウントされない（0-0-0 になる）
*（全称セレクター）
:where()
:is()との違いはまさに詳細度があるかないか
詳細は個別ページを参照
style属性（インラインスタイル）
<div style="<スタイル>">のように書いたスタイルはセレクターを指定したスタイルより常に優先される
詳細度は便宜上s-x-y-z（sがstyle属性）のような形式で表現されることがある
!importantはそれがついていないプロパティ全てより優先される
こちらも詳細は個別ページを参照
インラインスタイル含め!importantがついていない全てに対し優先される
詳細度は便宜上i-s-x-y-z（iが!important）のような形式で表現されることがある
計算された詳細度の確認方法
Chrome DevToolsの様なブラウザの開発者ツールで確認可能
https://gyazo.com/801c32b6899914f4bf4114a49f14665c
Chromeの場合はセレクターにマウスホバーすることで表示される
特異性と表記されているが意味は同じ
詳細度は各列での加点制
0-0-1
要素セレクタ
例) <div id="foo">に対応するdiv
擬似要素
擬似要素 - CSS: カスケーディングスタイルシート | MDN
0-1-0
クラスセレクター
例) <div class="foo">に対応する.foo
属性セレクター
例) [href^="https://scrapbox.io]
擬似クラス
例) :after
1-0-0
IDセレクター
例) <div id="foo">に対応する#foo
0-10-0
例)
code:0-10-0.css
.foo.foo.foo.foo.foo.foo.foo.foo.foo.foo {
/* 0-10-0 のセレクター */
}
同じセレクターを連続させても加算させることができる
ただし、いくら増やしても繰り上がって1-0-0のようにはならない
https://gyazo.com/219becdaffa1f13c4928e4168884b4f5
特異性
1-0-0-0
htmlのstyle属性（インラインスタイル）
例) <div style="color: black">
ID列より優先される
1-0-0-0-0
!important
style属性より優先される
CSSファイルや<style>のスタイルがstyle属性に勝つには、!importantに頼る以外に方法はない
点数に関係しないもの
CSSの結合子
例) div > aの>
同じ詳細度の場合は後に記述されたセレクタが優先される
そのためCosenseの場合app.css < projectcss < usercssの順番で優先される
詳細度の例
0-0-1
code:1.css
div {}
0-0-2
code:2.css
div a {}
0-3-1
code:31.css
.line a.link::after {}
3-0-0
code:300.css
#foo#bar#baz {}
1-0-0-1-0
code:10010.css
.foo { background-color: #333 !important; }
CSSの擬似クラスを使いだすとまたややこしいことになるらしいMijikko.icon
参考
CSSセレクタの優先順位の計算方法 - Qiita
CSSの優先順位を理解しよう（!importantの使い方も） | creive
詳細度 - CSS: カスケーディングスタイルシート | MDN
/icons/bg.icon
（2026/03/14以前の古い説明に対するご指摘）
この説明は(少なくとも)今は間違いですよ！綾坂こと.icon
言語化しづらいので何が違うかだけ書くと、1点のセレクタを11個以上使っても10点のセレクタには勝てない(他も同様)
昔からこうだったかは知らないが、少なくとも今は上位のセレクタには勝てないはず
ほんとだMijikko.icon（←書いた人）
（今も昔も）明らかに間違ってるので直します 直しました