コーディングの塾のお仕事でCSSを教えているときに、
IDが優先されるなどの「詳細度」について教えるタイミングがあって、
日本語でパッと見で分かりやすく伝えられないかなと思って作りました。
※詳しい内容は以下の参考にさせていただいたサイトをよく読んでいただければ幸いです。
参考サイト
- 詳細度 - CSS: カスケーディングスタイルシート | MDN
- Specifishity :: Specificity with Fish
- Specifics on CSS Specificity | CSS-Tricks
- エンジニアはもう一度CSSとちゃんと向き合ってみよう - 詳細度編
作ったもの
以下、数え方の例
ちなみに、例4とか同じタグではないので比べるものではありませんが、
「例4 > 例2と3 > 例1」の順に詳細度は高いです。
例1
※結合子の > は数えない！
例2
例3
※ :not() は数えない！
例4
