How is CSS specificity calculated?

Score as a tuple of (inline, id, class/attribute/pseudo-class, element/pseudo-element), compared left to right:

Key points:

• On a tie, the later declaration wins.
• !important jumps above the normal cascade (except user-stylesheet !important).
• :is()/:not() take the specificity of their strongest argument; :where() is always 0 → perfect for easily-overridable defaults.
• @layer orders precedence without a specificity arms race.