CSS Specificity Calculator
Specificity of CSS selectors, including :is, :not, :has and :where.
About this tool
Paste one selector per line, or a comma-separated list. The calculator shows each selector's ID, class and type counts and its specificity triple, sorted from strongest to weakest, and marks ties, where the rule later in the stylesheet wins.
How CSS specificity works
When several rules set the same property on an element, the browser picks the one from the most important origin and layer, then the one with the highest specificity, and only then the one that comes last. Specificity is three numbers compared from left to right. The first counts ID selectors. The second counts classes, attribute selectors such as [type="text"] and pseudo-classes such as :hover or :focus-visible. The third counts element types such as div and pseudo-elements such as ::before. The universal selector * and combinators such as >, + and the space add nothing. Because the columns are compared in order, one ID, (1, 0, 0), beats any number of classes. #nav .item a:hover is (1, 2, 1). Selectors Level 4 adds some rules: :is(), :not() and :has() take the specificity of their most specific argument, so :is(#main, .content) p is (1, 0, 1); :where() always counts as zero, which makes it perfect for defaults that should be easy to override; and :nth-child(2n+1 of .x) counts as a pseudo-class plus its selector. Honest limits: inline styles and !important override normal specificity, and cascade layers are decided before specificity is even compared. This calculator doesn't check that your selector is valid CSS. The CSS minifier compresses stylesheets and the flexbox playground helps with layout. Flexbox vs Grid: which one, when compares CSS layout systems.
Frequently asked questions
How is CSS specificity calculated?
Count IDs, then classes, attributes and pseudo-classes, then types and pseudo-elements, and compare those three numbers from left to right.
Does :where() add specificity?
No. :where() always has zero specificity, whatever is inside it.
Does !important change specificity?
No. It's a separate step that overrides normal declarations regardless of specificity.
Is my data saved?
No. The calculation runs in your browser and nothing is stored or sent.