#.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
:not() / :is() / :has()	:not(.x)	(0,1,0)	10

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

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.

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.

: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.

!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.

Share this tool

Related Tools

SHD

CSS Box Shadow Generator

Free online CSS box shadow generator - create beautiful CSS box shadows with a visual builder and live preview

Aspect Ratio Calculator

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

🎂

Age Calculator

Free online age calculator - calculate your exact age from your birthdate in years, months, and days

⬛

CSS Flexbox Generator

Flexbox generator - visual CSS flexbox layout builder with live preview and ready-to-copy CSS code

▦

CSS Grid Generator

Free online CSS grid generator - visual CSS grid layout builder with live preview and code export

🔍

Text Similarity Checker

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

Selector Type

Example

Specificity

Score

Universal

(0,0,0)

Type / Element

div

(0,0,1)

Pseudo-element

::before

(0,0,1)

Class

.card

(0,1,0)

Attribute

[type]

(0,1,0)

Pseudo-class

:hover

(0,1,0)

#main

(1,0,0)

100

:where()

:where(.x)

(0,0,0)

:not() / :is() / :has()

:not(.x)

(0,1,0)

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