Design

#.a

CSS Specificity Calculator

Calculate and compare CSS selector specificity scores

CSS Selectors

Enter one selector per line. Comma-separated selectors are treated individually.

Specificity legend:

A = IDs (#id)

B = Classes, attributes, pseudo-classes

C = Types, pseudo-elements

#.a

No selectors entered

Type CSS selectors above or click to get started.

Specificity Quick Reference

Selector Type	Example	Specificity	Score
Universal	*	(0,0,0)	0
Type / Element	div	(0,0,1)	1
Pseudo-element	::before	(0,0,1)	1
Class	.card	(0,1,0)	10
Attribute	[type]	(0,1,0)	10
Pseudo-class	:hover	(0,1,0)	10
ID	#main	(1,0,0)	100
:where()	:where(#x)	(0,0,0)	0
:is() / :not() / :has()	:is(#x, .y)	(1,0,0)	100

:is(), :not(), :has() take the specificity of their most specific argument, not their own. The functional pseudo-class itself adds nothing.
:nth-child(An+B of S), :host() and :host-context() count as a pseudo-class plus the most specific selector in their argument.
!important declarations win over normal declarations regardless of specificity (they sit in a higher cascade layer, not the specificity tuple).
Inline styles (the style attribute) beat any selector. Conceptually they rank above the (a,b,c) tuple.
Combinators (> + ~) and the universal selector * add no specificity.

Specificity Levels

None0

Low1 - 10

Medium11 - 50

High51 - 100

Very High101+

Share to Community

Was this tool helpful?

What is CSS Specificity Calculator?

Free online CSS specificity calculator to understand which CSS selector wins with our free CSS Specificity Calculator.

Enter one or more selectors and instantly see their specificity broken down into ID (A), Class (B), and Type (C) components. The tool visually compares selectors with color-coded bar charts, highlights the winner, and handles advanced pseudo-classes like :not(), :is(), :has(), and :where(). All processing runs entirely in your browser - no data is sent anywhere. No signup required.

How to Use CSS Specificity Calculator

1Enter one CSS selector per line in the textarea, or click 'Load Examples' to start with common selectors
2The tool instantly calculates the specificity (A, B, C) for each selector
3Review the color-coded bar chart to visually compare selector weights
4The highest-specificity selector is highlighted as the winner
5Use the total score column (A*100 + B*10 + C) for quick numeric comparison

Frequently Asked Questions

What is CSS specificity?

CSS specificity is the algorithm browsers use to decide which CSS rule applies when multiple rules target the same element. It is calculated as a three-part score (A, B, C) where A counts ID selectors, B counts class selectors, attribute selectors, and pseudo-classes, and C counts type selectors and pseudo-elements. A higher specificity score overrides a lower one.

How is specificity calculated?

Specificity is represented as (A, B, C). A is the number of #id selectors. B is the number of .class selectors, [attribute] selectors, and pseudo-classes like :hover or :nth-child(). C is the number of element type selectors (div, p, a) and pseudo-elements (::before, ::after). The selector with the higher leftmost value wins.

How do :not(), :is(), :has(), and :where() affect specificity?

:not(), :is(), and :has() do not add specificity themselves, but their arguments are counted normally. :where() is unique because both the pseudo-class and all of its arguments contribute zero specificity, making it useful for writing easily-overridable styles.

Does !important affect specificity?

!important is not part of the specificity calculation. It is a separate flag that overrides normal cascade rules entirely. A declaration with !important will win over any normal declaration regardless of specificity, but among multiple !important declarations, specificity still determines the winner.

Why is one selector winning even though the other has more classes?

Specificity is compared column by column from left to right, not by adding everything up. A single ID (1,0,0) beats any number of classes (0,99,0) because the ID column is higher. Paste both selectors here and the bar chart shows exactly which column decides the winner.

What does a specificity of 0,1,0 mean?

It means one class, attribute, or pseudo-class and nothing else. A 0,1,0 selector always beats any selector made only of element types, such as div p span, because a class outranks any count of type selectors. It loses to anything that includes an ID.

Share this tool

Related Tools

🔍

Text comparison tool

Free online text similarity checker - compare two texts and calculate similarity percentage

npm

Npm package search

Free online NPM package explorer - search npm packages, check bundle sizes, and generate CDN links

👁

Color Blindness Simulator

Free online color blindness simulator - see how colors appear to people with color vision deficiency

◑

Wcag contrast checker

Free online color contrast checker - check WCAG color contrast ratios for accessibility compliance

Aspect Ratio Calculator

Free online aspect ratio calculator - calculate and convert aspect ratios for images, videos, and screens

🧭

Css browser support

Free online browser feature support - check CSS and HTML feature browser compatibility

Text diff

Free online text diff checker - compare two texts and see the differences highlighted line by line

Google fonts pairing

Free online font pair generator - find beautiful Google Fonts pairings with live preview and ready-to-use code

Keep reading: CSS Cheat Sheet and file permissions reference. Doing this in code instead? See the utility endpoints.

Specificity Quick Reference

Selector Type	Example	Specificity	Score
Universal	*	(0,0,0)	0
Type / Element	div	(0,0,1)	1
Pseudo-element	::before	(0,0,1)	1
Class	.card	(0,1,0)	10
Attribute	[type]	(0,1,0)	10
Pseudo-class	:hover	(0,1,0)	10
ID	#main	(1,0,0)	100
:where()	:where(#x)	(0,0,0)	0
:is() / :not() / :has()	:is(#x, .y)	(1,0,0)	100

:is(), :not(), :has() take the specificity of their most specific argument, not their own. The functional pseudo-class itself adds nothing.

:nth-child(An+B of S), :host() and :host-context() count as a pseudo-class plus the most specific selector in their argument.

!important declarations win over normal declarations regardless of specificity (they sit in a higher cascade layer, not the specificity tuple).

Inline styles (the style attribute) beat any selector. Conceptually they rank above the (a,b,c) tuple.

Combinators (> + ~) and the universal selector * add no specificity.

What is CSS Specificity Calculator?

Free online CSS specificity calculator to understand which CSS selector wins with our free CSS Specificity Calculator.

How to Use CSS Specificity Calculator

1Enter one CSS selector per line in the textarea, or click 'Load Examples' to start with common selectors

2The tool instantly calculates the specificity (A, B, C) for each selector

3Review the color-coded bar chart to visually compare selector weights

4The highest-specificity selector is highlighted as the winner

5Use the total score column (A*100 + B*10 + C) for quick numeric comparison

Frequently Asked Questions