CSS Specificity Calculator
Calculate the specificity (A,B,C) of CSS selectors, including :is(), :not(), :has() and :where(), and see which wins.
Runs in your browserCSS selectors → Text
Loading tool…
Example
#nav .item > a:hover .btn.primary, ul li::before :where(#x) p
A,B,C Selector 1,2,1 #nav .item > a:hover ← highest 0,2,0 .btn.primary 0,0,3 ul li::before 0,0,1 :where(#x) p
How to use the CSS Specificity Calculator
- Paste or type your CSS selectors into the input area, or open a file from your device.
- Adjust the options above the editor if the tool offers any.
- Review the Text result, then copy it or download it as a file.
Privacy and limitations
- Your data is processed on your device and is not uploaded to any server.
Frequently asked questions
How do I read A,B,C?
A counts IDs, B counts classes, attributes and pseudo-classes, C counts elements and pseudo-elements. Compare A first, then B, then C.
Related converters
SCSS to CSS CompilerCompile SCSS or indented Sass to plain CSS in your browser with the official Dart Sass compiler, expanded or minified.CSS to JS Object ConverterConvert CSS declarations or rules into camelCase JavaScript style objects for React, CSS-in-JS or JSON.Less to CSS CompilerCompile Less to CSS in your browser: variables, mixins, guards, operations and colour functions, readable or minified.CSS Border Radius GeneratorSet each corner radius in px, % or rem with a live preview and get the shortest border-radius shorthand.CSS Box Shadow GeneratorBuild layered CSS box-shadow values visually with offset, blur, spread, colour, opacity and inset controls.CSS Gradient GeneratorDesign linear, radial and conic CSS gradients with up to five colour stops, a live preview and copy-ready CSS.EM to PX ConverterConvert em values to pixels from a parent font size, as a list or inside pasted CSS rules.PX to EM ConverterConvert pixel values to em relative to a parent font size, for single values or every px in a stylesheet.