CSS Specificity Calculator

How CSS specificity works

When two rules target the same element, the browser uses specificity to decide which wins. It is a three-part score: a counts ID selectors, b counts classes, attribute selectors, and pseudo-classes, and c counts element types and pseudo-elements. The groups are compared from left to right, so a single ID (1,0,0) beats any number of classes (0,9,0). Inline styles and !important sit above all of this. The universal selector and combinators add nothing, :where() is always zero, and :is(), :not(), and :has() take the specificity of their argument.

Writing the selectors themselves? Test patterns with the regex tester or format a stylesheet with the CSS formatter.