CSS Specificity Calculator

Score any selector and see which rule wins.

Compare two selectors

Which rule wins when both match the same element?

111wins
#app.carda
030
.card.link.link--active

#app .card a wins on ids (1,1,1 beats 0,3,0).

Rank a list

Paste selectors, one per line — strongest first.

1#app .card > a:hover121
2:is(#main, .content) p101
3.btn.btn--primary020
4[data-state='open'] .panel020
5:where(.theme-dark) .card010
6* + .stack010
7ul li a::before004

Selectors

How it is counted

  • A ids
  • B classes, attributes, pseudo-classes
  • C elements and pseudo-elements
  • Columns never carry: 11 classes still lose to one id.
  • :where() always scores zero; :is() and :not() take their strongest argument.
  • !important and inline styles sit above all of this.