CSS Specificity Battle
Two selectors enter, one wins — see exactly how the specificity score is worked out.
About this tool
Specificity is scored as (IDs, classes/attributes/pseudo-classes, elements/pseudo-elements) and compared column by column, left to right — any number of extra classes never outweighs a single ID.
It follows the Selectors Level 4 rules used by every current browser: :is(), :not() and :has() count as their most specific argument, :where() is always zero, and :nth-child(… of S) adds the selector S. If you enter a comma-separated list, the most specific selector in it is used. When the scores tie, the rule that appears later in the stylesheet wins, but !important and cascade layers (@layer) are checked before specificity, so a less specific rule can still win if it uses them.