CSS Specificity & Cascade Layers

Compute (a, b, c) tuples and watch @layer order beat selector specificity.

Specificity Calculator

Type a selector. Functional pseudos: :is()/:not()/:has() take the most specific argument; :where() always contributes 0.

0
a — IDs
#header, #main
0
b — Classes
.btn, [type], :hover
0
c — Types
div, span, ::before
Breakdown

Cascade Layers Visualizer

Three rules target the same element. components has the highest specificity (#cascade-target.widget), but the last layer wins.


      

      

        

          
Cascade wins here

        

        

          
Winning declaration