CSS Specificity Calculator

Calculate and understand the specificity score of CSS selectors.

tools.css-specificity-calculator.selector
1
IDs
2
Classes
1
Elements
tools.css-specificity-calculator.output
1,2,1

Specificity Score

Info

Specificity determines which CSS rule is applied by the browser when multiple rules target the same element.

  • IDs (#id) give 1-0-0 score.
  • Classes (.class), pseudo-classes (:hover), and attributes ([type]) give 0-1-0 score.
  • Elements (div, p) and pseudo-elements (::before) give 0-0-1 score.
  • Inline styles always win (1-0-0-0) but aren't part of this calculator.

About this Tool

CSS Specificity is a weight that is applied to a given CSS declaration, determined by the number of each selector type in the matching selector. When multiple declarations have equal specificity, the last declaration found in the CSS is applied to the element. Specificity only applies when the same element is targeted by multiple declarations.

Frequently Asked Questions

Previous
Tailwind Class LookupDesign & Style
Next
CSS Unit ConverterDesign & Style