Web Tools tools.bryantsmith.com

CSS & Layout

CSS Specificity Calculator

Work out the specificity of any CSS selector and see which selector wins a conflict. Everything runs locally in your browser — nothing is uploaded.

Runs in your browser v1.0.0

Selectors

one per line

One selector per line, or paste a whole stylesheet — the selectors are pulled out automatically. Commas inside :is(), :not() and attributes are kept intact.

Specificity

live

How specificity is counted

Specificity is a three-part score (a, b, c). a counts ID selectors (#id). b counts classes (.class), attribute selectors ([type="text"]) and pseudo-classes (:hover). c counts type selectors (div) and pseudo-elements (::before). The universal selector * and combinators add nothing. :is(), :not() and :has() take the specificity of their most specific argument, while :where() always adds zero.

Related tools

  • Aspect Ratio CalculatorConvert width and height into a simplified aspect ratio, find a missing dimension from a ratio, and copy a CSS aspect-ratio value.
  • Border Radius GeneratorSet uniform or per-corner border radii with a live preview, then copy the CSS — entirely in your browser.
  • Box Shadow GeneratorVisually build single or layered CSS box shadows and copy production-ready CSS — entirely in your browser.
  • CSS Clamp GeneratorGenerate responsive clamp() values from minimum and maximum sizes and viewport ranges, with a live preview.
  • CSS Filter GeneratorBuild CSS filter chains for blur, brightness, contrast, hue, saturation and more with a live preview and copyable CSS.
  • CSS Gradient GeneratorBuild linear, radial and conic CSS gradients with a live preview and copy-ready CSS — all in your browser.

More CSS & Layout tools