CSS Specificity Calculator
Type one or more selectors, one on each line. You get each score as IDs, classes and elements, and a ranking from strongest to weakest.
Inline styles and !important sit above all of these scores. When two selectors tie, the one written later in the stylesheet wins.
Worked examples
A selector with an ID, a class, a pseudo-class and two elements
#nav .item:hover > a::before
1, 2, 2
One ID. The class .item and the pseudo-class :hover make two. The element a and the pseudo-element ::before make two.
About CSS Specificity Calculator
When two CSS rules target the same element, specificity decides which one wins. It is a score made of three numbers, and comparing them by hand gets confusing once selectors include pseudo-classes, attribute selectors and functions such as :not() and :is(). This calculator does the counting for you and ranks several selectors against each other.
Type one selector on each line. For each you get the number of IDs, the number of classes, attributes and pseudo-classes, and the number of element names and pseudo-elements, together with a score and a rank. A note names the strongest selector or tells you about a tie, in which case the rule written last wins.
How to use CSS Specificity Calculator
- Type or paste your selectors, one on each line.
- Read the score for each: IDs, classes, then elements.
- Check the rank, where 1 is the strongest.
- Change a selector and watch the score update.
Common uses
- Finding out why a style is being ignored
- Choosing between two selectors before writing a rule
- Learning how :where() and :is() change specificity
- Reviewing a stylesheet for selectors that are too strong
Frequently asked questions
How is specificity compared?
Part by part from the left. One ID beats any number of classes, and one class beats any number of element names. Only when the first parts are equal does the second part count, and so on.
How do :is(), :not() and :has() count?
They add the score of their strongest argument, not the sum of all. The :where() function adds nothing at all, which makes it useful for low-priority default styles.
Where do inline styles and !important fit?
Both sit above every selector score. An inline style beats any selector, and an !important declaration beats a normal one regardless of specificity.
What happens when two scores are equal?
The rule that comes later in the stylesheet wins. That is why the order of your rules matters as well as their selectors.