CSS Specificity Calculator
Calculate the specificity score of any CSS selector.
1
IDs
2
Classes · Attrs · Pseudo-classes
2
Elements · Pseudo-elements
Specificity
1, 2, 2
Compared left-to-right; a higher group always wins regardless of lower ones. (Rough weight: 122.)
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.
Related Design & CSS tools
Color Converter
Convert a color to HEX, RGB, HSL, HSB, and CMYK at once.
HEX to RGB
Convert HEX color codes to RGB / RGBA values.
RGB to HEX
Convert RGB values into HEX color codes.
CSS Box Shadow Generator
Visually design CSS box-shadow with a live preview and code.
CSS Border Radius Generator
Visually craft border-radius with a live preview.
HEX to CMYK
Convert HEX colors to CMYK print values.
CMYK to HEX
Convert CMYK print values to HEX colors.
HEX to HSB
Convert HEX colors to HSB / HSV values.